退货申请详情功能完善

This commit is contained in:
zhh 2018-10-24 17:24:15 +08:00
parent d66d940d59
commit 592e5eb887
2 changed files with 237 additions and 108 deletions

View File

@ -14,6 +14,13 @@ export function deleteApply(params) {
params:params
})
}
export function updateApplyStatus(id,data) {
return request({
url:'/returnApply/update/status/'+id,
method:'post',
data:data
})
}
export function getApplyDetail(id) {
return request({

View File

@ -41,117 +41,208 @@
</el-card>
<el-card shadow="never" class="standard-margin">
<span class="font-medium">服务单信息</span>
<el-row class="standard-margin">
<el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
</el-row>
<el-row>
<el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号</el-col>
<el-col class="form-border font-small" :span="18" style="height:50px">
{{orderReturnApply.orderSn}}
<el-button type="text" size="small">查看</el-button>
</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
</el-col>
<el-col class="form-border font-small" :span="18" style="height:100px">
<img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
</el-col>
</el-row>
<el-row class="standard-margin">
<el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
<el-col class="form-border font-small" :span="18">{{totalAmount}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18">
<el-input size="small" v-model="updateStatusParam.returnAmount"
style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18">
<el-select size="small" style="width:200px" v-model="updateStatusParam.companyAddressId">
<el-option v-for="address in companyAddressList"
:key="address.id"
:value="address.id"
:label="address.addressName">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
</el-row>
<div class="form-container-border">
<el-row>
<el-col :span="6" class="form-border form-left-bg font-small">服务单号</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.id}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">申请状态</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.status | formatStatus}}</el-col>
</el-row>
<el-row>
<el-col :span="6" class="form-border form-left-bg font-small" style="height:50px;line-height:30px">订单编号
</el-col>
<el-col class="form-border font-small" :span="18" style="height:50px">
{{orderReturnApply.orderSn}}
<el-button type="text" size="small">查看</el-button>
</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">申请时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.createTime | formatTime}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">用户账号</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.memberUsername}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系人</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnName}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.returnPhone}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">退货原因</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.reason}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">问题描述</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.description}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:100px;line-height:80px">凭证图片
</el-col>
<el-col class="form-border font-small" :span="18" style="height:100px">
<img v-for="item in proofPics" style="width:80px;height:80px" :src="item">
</el-col>
</el-row>
</div>
<div class="form-container-border">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">订单金额</el-col>
<el-col class="form-border font-small" :span="18">{{totalAmount}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">确认退款金额
</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18">
<el-input size="small" v-model="updateStatusParam.returnAmount"
:disabled="orderReturnApply.status!==0"
style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
<div v-show="orderReturnApply.status!==3">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">选择收货点
</el-col>
<el-col class="form-border font-small" style="height:52px" :span="18">
<el-select size="small"
style="width:200px"
:disabled="orderReturnApply.status!==0"
v-model="updateStatusParam.companyAddressId">
<el-option v-for="address in companyAddressList"
:key="address.id"
:value="address.id"
:label="address.addressName">
</el-option>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货人姓名</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.name}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">所在区域</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress | formatRegion}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">详细地址</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.detailAddress}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">联系电话</el-col>
<el-col class="form-border font-small" :span="18">{{currentAddress.phone}}</el-col>
</el-row>
</div>
</div>
<div class="form-container-border" v-show="orderReturnApply.status!==0">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理人员</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleMan}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleTime | formatTime}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">处理备注</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.handleNote}}</el-col>
</el-row>
</div>
<div class="form-container-border" v-show="orderReturnApply.status===2">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货人员</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveMan}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" >收货时间</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveTime | formatTime}}</el-col>
</el-row>
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6">收货备注</el-col>
<el-col class="form-border font-small" :span="18">{{orderReturnApply.receiveNote}}</el-col>
</el-row>
</div>
<div class="form-container-border" v-show="orderReturnApply.status===0">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">处理备注</el-col>
<el-col class="form-border font-small" :span="18">
<el-input size="small" v-model="updateStatusParam.handleNote" style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
</div>
<div class="form-container-border" v-show="orderReturnApply.status===1">
<el-row>
<el-col class="form-border form-left-bg font-small" :span="6" style="height:52px;line-height:32px">收货备注</el-col>
<el-col class="form-border font-small" :span="18">
<el-input size="small" v-model="updateStatusParam.receiveNote" style="width:200px;margin-left: 10px"></el-input>
</el-col>
</el-row>
</div>
<div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===0">
<el-button type="primary" size="small" @click="handleUpdateStatus(1)">确认退货</el-button>
<el-button type="danger" size="small" @click="handleUpdateStatus(3)">拒绝退货</el-button>
</div>
<div style="margin-top:15px;text-align: center" v-show="orderReturnApply.status===1">
<el-button type="primary" size="small" @click="handleUpdateStatus(2)">确认收货</el-button>
</div>
</el-card>
</div>
</template>
<script>
import {getApplyDetail} from '@/api/returnApply';
import {getApplyDetail,updateApplyStatus} from '@/api/returnApply';
import {fetchList} from '@/api/companyAddress';
import {formatDate} from '@/utils/date';
const defaultUpdateStatusParam = {
companyAddressId: null,
handleMan: null,
handleMan: 'admin',
handleNote: null,
receiveMan: null,
receiveMan: 'admin',
receiveNote: null,
returnAmount: 0,
status: 0
};
const defaultOrderReturnApply = {
id: null,
orderId: null,
companyAddressId: null,
productId: null,
orderSn: null,
createTime: null,
memberUsername: null,
returnAmount: null,
returnName: null,
returnPhone: null,
status: null,
handleTime: null,
productPic: null,
productName: null,
productBrand: null,
productAttr: null,
productCount: null,
productPrice: null,
productRealPrice: null,
reason: null,
description: null,
proofPics: null,
handleNote: null,
handleMan: null,
receiveMan: null,
receiveTime: null,
receiveNote: null
};
export default {
name: 'returnApplyDetail',
data() {
return {
id: null,
orderReturnApply: null,
orderReturnApply: Object.assign({},defaultOrderReturnApply),
productList: null,
proofPics: null,
updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
@ -161,7 +252,6 @@
created() {
this.id = this.$route.query.id;
this.getDetail();
this.getCompanyAddressList();
},
computed: {
totalAmount() {
@ -171,11 +261,13 @@
return 0;
}
},
currentAddress(){
currentAddress() {
console.log("currentAddress()");
let id = this.updateStatusParam.companyAddressId;
for(let i=0;i<this.companyAddressList.length;i++){
let address=this.companyAddressList[i];
if(address.id===id){
if(this.companyAddressList==null)return {};
for (let i = 0; i < this.companyAddressList.length; i++) {
let address = this.companyAddressList[i];
if (address.id === id) {
return address;
}
}
@ -201,35 +293,60 @@
let date = new Date(time);
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
},
formatRegion(address){
let str=address.province;
if(address.city!=null){
str+=" "+address.city;
formatRegion(address) {
let str = address.province;
if (address.city != null) {
str += " " + address.city;
}
str+=" "+address.region;
str += " " + address.region;
return str;
}
},
methods: {
getDetail() {
getApplyDetail(this.id).then(response => {
console.log("getDetail")
this.orderReturnApply = response.data;
this.productList = [];
this.productList.push(this.orderReturnApply);
if (this.orderReturnApply.proofPics != null) {
this.proofPics = this.orderReturnApply.proofPics.split(",")
}
//退
if(this.orderReturnApply.status===1||this.orderReturnApply.status===2){
this.updateStatusParam.returnAmount=this.orderReturnApply.returnAmount;
this.updateStatusParam.companyAddressId=this.orderReturnApply.companyAddressId;
}
this.getCompanyAddressList();
});
},
getCompanyAddressList() {
fetchList().then(response => {
console.log("getCompanyAddressList()")
this.companyAddressList = response.data;
for(let i=0;i<this.companyAddressList.length;i++){
if(this.companyAddressList[i].receiveStatus===1){
this.updateStatusParam.companyAddressId=this.companyAddressList[i].id;
for (let i = 0; i < this.companyAddressList.length; i++) {
if (this.companyAddressList[i].receiveStatus === 1&&this.orderReturnApply.status===0) {
this.updateStatusParam.companyAddressId = this.companyAddressList[i].id;
}
}
});
},
handleUpdateStatus(status){
this.updateStatusParam.status=status;
this.$confirm('是否要进行此操作?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateApplyStatus(this.id,this.updateStatusParam).then(response=>{
this.$message({
type: 'success',
message: '操作成功!',
duration:1000
});
this.$router.back();
});
});
}
}
}
@ -247,11 +364,16 @@
.standard-margin {
margin-top: 15px;
}
.form-border {
border: 1px solid #DCDFE6;
border-right: 1px solid #DCDFE6;
border-bottom: 1px solid #DCDFE6;
padding: 10px;
margin: 0 0 -1px -1px;
}
.form-container-border {
border-left: 1px solid #DCDFE6;
border-top: 1px solid #DCDFE6;
margin-top: 15px;
}
.form-left-bg {