退货申请详情页完善
This commit is contained in:
zhh
parent
f8707d0bcf
commit
d66d940d59
7
src/api/companyAddress.js
Normal file
7
src/api/companyAddress.js
Normal file
@ -0,0 +1,7 @@
|
||||
import request from '@/utils/request'
|
||||
export function fetchList() {
|
||||
return request({
|
||||
url:'/companyAddress/list',
|
||||
method:'get'
|
||||
})
|
||||
}
|
||||
@ -14,3 +14,10 @@ export function deleteApply(params) {
|
||||
params:params
|
||||
})
|
||||
}
|
||||
|
||||
export function getApplyDetail(id) {
|
||||
return request({
|
||||
url:'/returnApply/'+id,
|
||||
method:'get'
|
||||
})
|
||||
}
|
||||
|
||||
@ -177,6 +177,13 @@ export const constantRouterMap = [
|
||||
name: 'returnReason',
|
||||
component: () => import('@/views/oms/apply/reason'),
|
||||
meta: {title: '退货原因设置', icon: 'order-return-reason'}
|
||||
},
|
||||
{
|
||||
path: 'returnApplyDetail',
|
||||
name: 'returnApplyDetail',
|
||||
component: () => import('@/views/oms/apply/applyDetail'),
|
||||
meta: {title: '退货原因详情'},
|
||||
hidden:true
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -99,3 +99,54 @@ a:hover {
|
||||
padding: 35px 35px 15px 35px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
//主标题
|
||||
.font-extra-large {
|
||||
font-size: 20px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
//标题
|
||||
.font-large {
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
//小标题
|
||||
.font-medium {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
//正文
|
||||
.font-small {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
//正文（小）
|
||||
.font-extra-small {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.color-main {
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.color-success {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.color-warning {
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.color-danger {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.color-info {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
|
||||
262
src/views/oms/apply/applyDetail.vue
Normal file
262
src/views/oms/apply/applyDetail.vue
Normal file
@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div class="detail-container">
|
||||
<el-card shadow="never">
|
||||
<span class="font-medium">退货商品</span>
|
||||
<el-table
|
||||
border
|
||||
class="standard-margin"
|
||||
ref="productTable"
|
||||
:data="productList">
|
||||
<el-table-column label="商品图片" width="160" align="center">
|
||||
<template slot-scope="scope">
|
||||
<img style="height:80px" :src="scope.row.productPic">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品名称" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span class="font-small">{{scope.row.productName}}</span><br>
|
||||
<span class="font-small">品牌：{{scope.row.productBrand}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="价格/货号" width="180" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span class="font-small">价格：￥{{scope.row.productRealPrice}}</span><br>
|
||||
<span class="font-small">货号：NO.{{scope.row.productId}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="属性" width="180" align="center">
|
||||
<template slot-scope="scope">{{scope.row.productAttr}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" width="100" align="center">
|
||||
<template slot-scope="scope">{{scope.row.productCount}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="小计" width="100" align="center">
|
||||
<template slot-scope="scope">￥{{totalAmount}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="float:right;margin-top:15px;margin-bottom:15px">
|
||||
<span class="font-medium">合计：</span>
|
||||
<span class="font-medium color-danger">￥{{totalAmount}}</span>
|
||||
</div>
|
||||
</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>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {getApplyDetail} from '@/api/returnApply';
|
||||
import {fetchList} from '@/api/companyAddress';
|
||||
import {formatDate} from '@/utils/date';
|
||||
|
||||
const defaultUpdateStatusParam = {
|
||||
companyAddressId: null,
|
||||
handleMan: null,
|
||||
handleNote: null,
|
||||
receiveMan: null,
|
||||
receiveNote: null,
|
||||
returnAmount: 0,
|
||||
status: 0
|
||||
};
|
||||
export default {
|
||||
name: 'returnApplyDetail',
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
orderReturnApply: null,
|
||||
productList: null,
|
||||
proofPics: null,
|
||||
updateStatusParam: Object.assign({}, defaultUpdateStatusParam),
|
||||
companyAddressList: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.id = this.$route.query.id;
|
||||
this.getDetail();
|
||||
this.getCompanyAddressList();
|
||||
},
|
||||
computed: {
|
||||
totalAmount() {
|
||||
if (this.orderReturnApply != null) {
|
||||
return this.orderReturnApply.productRealPrice * this.orderReturnApply.productCount;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
currentAddress(){
|
||||
let id = this.updateStatusParam.companyAddressId;
|
||||
for(let i=0;i<this.companyAddressList.length;i++){
|
||||
let address=this.companyAddressList[i];
|
||||
if(address.id===id){
|
||||
return address;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatStatus(status) {
|
||||
if (status === 0) {
|
||||
return "待处理";
|
||||
} else if (status === 1) {
|
||||
return "退货中";
|
||||
} else if (status === 2) {
|
||||
return "已完成";
|
||||
} else {
|
||||
return "已拒绝";
|
||||
}
|
||||
},
|
||||
formatTime(time) {
|
||||
if (time == null || time === '') {
|
||||
return 'N/A';
|
||||
}
|
||||
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;
|
||||
}
|
||||
str+=" "+address.region;
|
||||
return str;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDetail() {
|
||||
getApplyDetail(this.id).then(response => {
|
||||
this.orderReturnApply = response.data;
|
||||
this.productList = [];
|
||||
this.productList.push(this.orderReturnApply);
|
||||
if (this.orderReturnApply.proofPics != null) {
|
||||
this.proofPics = this.orderReturnApply.proofPics.split(",")
|
||||
}
|
||||
});
|
||||
},
|
||||
getCompanyAddressList() {
|
||||
fetchList().then(response => {
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 1080px;
|
||||
padding: 35px 35px 15px 35px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.standard-margin {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.form-border {
|
||||
border: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
margin: 0 0 -1px -1px;
|
||||
}
|
||||
|
||||
.form-left-bg {
|
||||
background: #F2F6FC;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -198,7 +198,7 @@
|
||||
},
|
||||
formatReturnAmount(row){
|
||||
return row.productRealPrice*row.productCount;
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleSelectionChange(val){
|
||||
@ -211,7 +211,9 @@
|
||||
this.listQuery.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleViewDetail(){},
|
||||
handleViewDetail(index,row){
|
||||
this.$router.push({path:'/oms/returnApplyDetail',query:{id:row.id}})
|
||||
},
|
||||
handleBatchOperate(){
|
||||
if(this.multipleSelection==null||this.multipleSelection.length<1){
|
||||
this.$message({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user