<template>
|
<div class="after-sale-table">
|
<div class="table-header">
|
<div class="table-th">商品信息</div>
|
<div class="table-th">合计详情</div>
|
<div class="table-th !flex-none w-120">供应商信息</div>
|
<div class="table-th">收货人信息</div>
|
<div class="table-th !flex-none w-180">操作</div>
|
</div>
|
<div v-for="item in list" :key="item.id" class="table-item">
|
<div class="table-item__title">
|
<span class="font-bold">订单号：{{ item.orderNo }}</span>
|
<span class="font-bold">售后单号：{{ item.salesNo }}</span>
|
<span>申请时间：{{ item.createTime }}</span>
|
<span
|
>售后状态：<span
|
:class="{ 'text-primary': item.status === 'PENDING' }"
|
>{{ item.statusStr }}</span
|
></span
|
>
|
<el-tag v-if="item.title" type="danger" size="mini" class="ml-4"
|
>第二次售后</el-tag
|
>
|
</div>
|
<div class="table-body">
|
<div class="table-td">
|
<div class="flex">
|
<el-bus-image :src="item.flowerCover" class="w-60 h-60 mr-8" />
|
<div class="leading-20">
|
<div class="text-14 font-bold">
|
{{ item.flowerName }} × {{ item.flowerNum }}
|
</div>
|
<div class="leading-20">
|
<span>等级：{{ item.flowerLevelStr }}</span>
|
<span class="ml-8">颜色：{{ item.flowerColor }}</span>
|
</div>
|
<div class="leading-20">
|
<span>单价：¥{{ item.price }}</span>
|
<span class="ml-8">订单总额：¥{{ item.total }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="table-td">
|
<div class="leading-20">申请数量：{{ item.num }}</div>
|
<div class="leading-20">实际退款：{{ item.totalFee }}</div>
|
<div class="leading-20 flex">
|
售后类别：
|
<div class="flex-1 text-overflow-2 w-0 break-all">
|
{{ item.salesTypeStr }}
|
</div>
|
</div>
|
</div>
|
<div class="table-td !flex-none w-120 flex items-center">
|
{{ item.supplierName }}
|
</div>
|
<div class="table-td">
|
<div class="leading-20">姓名：{{ item.customer }}</div>
|
<div class="leading-20">联系方式：{{ item.customerTel }}</div>
|
<div class="leading-20 flex">
|
用户地址：
|
<div class="flex-1 w-0">
|
{{ item.customerProvince }}{{ item.customerCity
|
}}{{ item.customerRegion }}{{ item.customerAddress }}
|
</div>
|
</div>
|
</div>
|
<div class="table-td !flex-none w-180 flex items-center">
|
<el-button type="text" @click="onDetail(item)">查看详情</el-button>
|
<el-button
|
v-if="item.status === 'PENDING'"
|
type="text"
|
@click="onHandle(item)"
|
>售后处理</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
list: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
methods: {
|
onDetail(item) {
|
this.$emit('detail', item)
|
},
|
onHandle(item) {
|
this.$emit('handle', item)
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.after-sale-table {
|
.table-header {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
color: $main-title-color;
|
background-color: #f4f4f5;
|
.table-th {
|
flex: 1;
|
height: 45px;
|
line-height: 45px;
|
padding: 0 10px;
|
font-weight: bold;
|
}
|
}
|
.table-item {
|
margin-top: 10px;
|
border-bottom: 1px solid #eee;
|
&__title {
|
height: 35px;
|
line-height: 35px;
|
background-color: #f4f4f5;
|
font-size: 14px;
|
color: $main-title-color;
|
padding: 0 10px;
|
& > span {
|
margin-right: 10px;
|
}
|
}
|
.table-body {
|
display: flex;
|
align-items: stretch;
|
font-size: 12px;
|
color: $main-title-color;
|
.table-td {
|
flex: 1;
|
padding: 15px 10px;
|
&:not(:last-child) {
|
border-right: 1px solid #eee;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
