xiaoning
/
yoga-manager-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

售后单详情

Browse Source
master
czc 2 years ago
parent 2b6df6ec16
commit 92eec6c1f5
3 changed files with 276 additions and 9 deletions
Show Stats Download Patch File Download Diff File

16
src/router/index.js
Unescape View File

@ -189,7 +189,21 @@ export const dynamicRoutes = [
meta: { title: '订单详情' } meta: { title: '订单详情' }
} }
] ]
} },
{
path: '/aftersale',
component: Layout,
hidden: true,
permissions: ['oms:aftersale:query'],
children: [
{
path: 'detail',
component: () => import('@/views/oms/aftersale/detail'),
name: 'aftersaleOrderDetail',
meta: { title: '售后订单详情' }
}
]
},
] ]
// 防止连续点击多次路由报错 // 防止连续点击多次路由报错

246
src/views/oms/aftersale/detail.vue
Unescape View File

@ -0,0 +1,246 @@
<template>
<div class="order_detail_wrapper">
<el-main v-loading="loading">
<el-card>
<el-descriptions title="订单信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
<template slot="extra">
<el-button size="small" @click="$router.back()">返回</el-button>
</template>
<el-descriptions-item label="订单号">{{ orderDetail.orderSn }}</el-descriptions-item>
<el-descriptions-item label="用户昵称">{{ orderDetail.nickName }}</el-descriptions-item>
<el-descriptions-item label="用户手机号">{{ orderDetail.phone }}</el-descriptions-item>
<el-descriptions-item label="下单时间">{{ parseTime(orderDetail.createTime, '')
}}</el-descriptions-item>
<el-descriptions-item label="支付方式">{{ getPayType(orderDetail) }}</el-descriptions-item>
<el-descriptions-item label="支付时间">{{ parseTime(orderDetail.payTime, '')
}}</el-descriptions-item>
<el-descriptions-item label="订单状态">{{ getOrderStatus(orderDetail) }}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card>
<div slot="header" style="font-size: 16px;font-weight: bold;">售后信息</div>
<el-table :data="refundInfoList">
<el-table-column label="售后单号" prop="id" width="150"></el-table-column>
<el-table-column label="售后类型" prop="applyRefundType" width="80">
<template slot-scope="{row}">
<span>{{ getAftersaleType(row) }}</span>
</template>
</el-table-column>
<el-table-column label="申请售后时间" prop="applyRefundTime" width="180">
<template slot-scope="{row}">
<span>
{{ parseTime(row.applyRefundTime, '') }}
</span>
</template>
</el-table-column>
<el-table-column label="退款金额" prop="refundAmount">
<template v-slot="scope">
￥<span>{{ scope.row.refundAmount }}</span>
</template>
</el-table-column>
<el-table-column label="申请原因" prop="reason"></el-table-column>
<!-- <el-table-column label="凭证" prop="proofPics">-->
<!-- <template slot-scope="{row}">-->
<!-- <el-image class="small-img circle-img" :src="row.proofPics"-->
<!-- :preview-src-list="[row.proofPics]" />-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="申请状态" prop="refundStatus" width="110">
<template slot-scope="{row}">
<span>{{ getAftersaleStatus(row) }}</span>
</template>
</el-table-column>
<el-table-column label="平台拒绝理由" prop="remark"></el-table-column>
<!-- <el-table-column label="退货快递号" prop="expressNo"></el-table-column>-->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit"
@click="handleWatch(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<el-card>
<el-descriptions title="收货信息" :column="2" border label-class-name="my-label" contentClassName="my-content">
<el-descriptions-item label="收货人姓名">{{ addressInfo.name }}</el-descriptions-item>
<el-descriptions-item label="收货人手机号">{{ addressInfo.userPhone }}</el-descriptions-item>
<el-descriptions-item label="收货区域">{{ addressInfo.area }}</el-descriptions-item>
<el-descriptions-item label="详细地址">{{ addressInfo.address }}</el-descriptions-item>
</el-descriptions>
</el-card>
<el-card>
<div slot="header" style="font-size: 16px;font-weight: bold;">商品信息</div>
<el-table :data="products">
<el-table-column label="商品图片" prop="pic">
<template slot-scope="{row}"><el-image class="small-img circle-img" :src="row.pic"
:preview-src-list="[row.pic]" /></template>
</el-table-column>
<el-table-column label="商品ID" prop="productId"></el-table-column>
<el-table-column label="商品名称" prop="productName"></el-table-column>
<el-table-column label="商品规格" align="center" prop="spData" width="180">
<template slot-scope="scope">
<div v-for="(item,key) in JSON.parse(scope.row.spData)">{{ key }}：{{ item }}</div>
</template>
</el-table-column>
<el-table-column label="价格" prop="salePrice"></el-table-column>
<el-table-column label="购买数量" prop="buyNum"></el-table-column>
</el-table>
</el-card>
<!-- 售后详细信息 -->
<el-dialog title="售后详细信息" :visible.sync="open" width="1100px" append-to-body>
<el-descriptions :column="2" border label-class-name="my-label" contentClassName="my-content">
<el-descriptions-item label="售后单号">{{ refundInfoDetail.id }}</el-descriptions-item>
<el-descriptions-item label="售后类型">{{ getAftersaleType(refundInfoDetail) }}</el-descriptions-item>
<el-descriptions-item label="申请售后时间">{{ parseTime(refundInfoDetail.applyRefundTime,'') }}</el-descriptions-item>
<el-descriptions-item label="退款金额">￥{{ refundInfoDetail.refundAmount }}</el-descriptions-item>
<el-descriptions-item label="申请原因">{{ refundInfoDetail.reason }}</el-descriptions-item>
<!-- <el-descriptions-item label="凭证">-->
<!-- <el-image class="small-img circle-img" :src="refundInfoDetail.proofPics"-->
<!-- :preview-src-list="[refundInfoDetail.proofPics]" />-->
<!-- </el-descriptions-item>-->
<el-descriptions-item label="申请状态">{{ getAftersaleStatus(refundInfoDetail) }}</el-descriptions-item>
<el-descriptions-item label="平台拒绝理由">{{ refundInfoDetail.remark }}</el-descriptions-item>
<el-descriptions-item label="退货快递号">{{ refundInfoDetail.expressNo }}</el-descriptions-item>
<el-descriptions-item label="物流公司">{{ getExpressName(refundInfoDetail) }}</el-descriptions-item>
</el-descriptions>
</el-dialog>
</el-main>
</div>
</template>
<script>
import { getOmsAftersale } from "@/api/oms/aftersale";
export default {
name: "OmsAftersaleDetail",
dicts: ['oms_order_status', 'oms_pay_type', "oms_aftersale_type", "oms_aftersale_status"],
data() {
return {
products: [],
orderDetail: {},
addressInfo: {},
// aliLogisticsInfoList: [],
refundInfoList: [],
loading: false,
experssList: [],
open: false,
refundInfoDetail: {},
aliLogisticsInfoList: []
}
},
created() {
const { id } = this.$route.query
this.queryDetail(id).then((expressNo) => {
// this.getLogistic(expressNo)
})
},
computed: {
orderStatusMap() {
let obj = this.dict.type.oms_order_status.map(item => [item.value, item.label])
let map = new Map(obj)
return map;
},
payTypeMap() {
let obj = this.dict.type.oms_pay_type.map(item => [item.value, item.label])
let map = new Map(obj)
return map
},
aftersaleTypeMap() {
let obj = this.dict.type.oms_aftersale_type.map(item => [item.value, item.label])
let map = new Map(obj)
return map;
},
aftersaleStatusMap() {
let obj = this.dict.type.oms_aftersale_status.map(item => [item.value, item.label])
let map = new Map(obj)
return map;
},
expressMap() {
let obj = this.experssList.map(item => [item.expressCode, item.expressName])
let map = new Map(obj)
return map
}
},
methods: {
queryDetail(id) {
this.loading = true
return new Promise(resolve =>
getOmsAftersale(id).then(res => {
const { productList, addressInfo, refundInfoList } = res;
this.orderDetail = res;
this.products = productList
this.refundInfoList = refundInfoList
this.addressInfo = addressInfo || {}
this.loading = false
})
)
},
getOrderStatus(row) {
return this.orderStatusMap.get(row.status + '')
},
getPayType(row) {
return this.payTypeMap.get(row.payType + '')
},
getAftersaleType(row) {
return this.aftersaleTypeMap.get(row.applyRefundType + '')
},
getAftersaleStatus(row) {
return this.aftersaleStatusMap.get(row.refundStatus + '')
},
getExpressName(row) {
return this.expressMap.get(row.expressName + '')
},
handleWatch(row) {
this.refundInfoDetail = row
// if(this.refundInfoDetail.allLogistics){
// this.aliLogisticsInfoList = JSON.parse(refundInfoDetail.allLogistics)
// }
this.open = true
},
cancel() {
this.open = false;
this.refundInfoDetail = {};
}
}
}
</script>
<style lang="stylus">
.order_detail_wrapper
> .el-card + .el-card
margin-top 1rem
.el-form-item
margin-bottom 0
.el-form-item__content, .el-form-item__label
line-height 2
.my-label
width 100px
.my-content
width 400px
.popperOptions[x-placement^=left] .popper__arrow::after{
border-left-color: #565D6B;
}
.popperOptions[x-placement^=right] .popper__arrow::after{
border-right-color: #565D6B;
}
.popperOptions[x-placement^=bottom] .popper__arrow::after{
border-bottom-color: #565D6B;
}
.popperOptions[x-placement^=top] .popper__arrow::after{
border-top-color: #565D6B;
}
.popperOptions{
background-color: #565D6B;
color: #FFFFFF;
border: #565D6B;
}
.el-timeline-item__content {
color: #fff;
}
.el-timeline-item__timestamp {
color: #fff;
}
</style>

23
src/views/oms/aftersale/index.vue
Unescape View File

@ -11,8 +11,8 @@
<el-option v-for="(item, index) in dict.type.oms_aftersale_type" :label="item.label" :value="item.value" /> <el-option v-for="(item, index) in dict.type.oms_aftersale_type" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="订单号" prop="orderId"> <el-form-item label="订单号" prop="orderSn">
<el-input v-model.trim="queryParams.orderId" placeholder="请输入订单号" clearable size="small" <el-input v-model.trim="queryParams.orderSn" placeholder="请输入订单号" clearable size="small"
@keyup.enter.native="handleQuery" /> @keyup.enter.native="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="售后单号" prop="id"> <el-form-item label="售后单号" prop="id">
@ -37,7 +37,7 @@
</el-form> </el-form>
<el-table v-loading="loading" :data="omsAftersaleList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="omsAftersaleList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <!-- <el-table-column type="selection" width="55" align="center" />-->
<el-table-column label="订单号" align="center" prop="orderSn" width="200"/> <el-table-column label="订单号" align="center" prop="orderSn" width="200"/>
<el-table-column label="售后单号" align="center" prop="id" width="160"/> <el-table-column label="售后单号" align="center" prop="id" width="160"/>
<el-table-column label="申请状态" align="center" prop="aftersaleStatus" width="80"> <el-table-column label="申请状态" align="center" prop="aftersaleStatus" width="80">
@ -69,8 +69,8 @@
<el-table-column label="处理人员" align="center" prop="handleMan" /> <el-table-column label="处理人员" align="center" prop="handleMan" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="140"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="140">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" @click="handleDetail(scope.row)" <el-button size="mini" type="text" @click="handleDetail(scope.row.orderId)"
v-hasPermi="['manager:oms:aftersale:query']">详情</el-button> v-hasPermi="['oms:aftersale:query']">详情</el-button>
<el-button size="mini" type="text" @click="approve(scope.row.orderId, 1)" <el-button size="mini" type="text" @click="approve(scope.row.orderId, 1)"
v-if="scope.row.aftersaleStatus == 0" v-hasPermi="['manager:oms:aftersale:update']">同意</el-button> v-if="scope.row.aftersaleStatus == 0" v-hasPermi="['manager:oms:aftersale:update']">同意</el-button>
<el-button size="mini" type="text" @click="handleOpen(scope.row.orderId, 2)" <el-button size="mini" type="text" @click="handleOpen(scope.row.orderId, 2)"
@ -138,7 +138,7 @@ export default {
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
orderId: null, orderSn: null,
type: null, type: null,
status: null, status: null,
userPhone: null, userPhone: null,
@ -280,7 +280,8 @@ export default {
}, },
/** 售后详情 */ /** 售后详情 */
handleDetail(orderId){ handleDetail(orderId){
const id = orderId
this.$router.push({ path: '/aftersale/detail', query: { id } })
}, },
/** 同意售后 */ /** 同意售后 */
approve(orderId, type){ approve(orderId, type){
@ -360,7 +361,13 @@ export default {
}) })
} }
}) })
} },
handleChange(value) {
if (!value) {
this.queryParams.startTime = null;
this.queryParams.endTime = null;
}
},
} }
}; };
</script> </script>

Write Preview
Loading…
Cancel
Save