<template>
|
<div class="after-sale-table">
|
<div class="table-header">
|
<div class="table-th">商品名称</div>
|
<div class="table-th !flex-none w-220">订单编号</div>
|
<div class="table-th !flex-none w-120">评价星级</div>
|
<div class="table-th">供应商信息</div>
|
<div class="table-th">评价内容</div>
|
<div class="table-th !flex-none w-220">买家</div>
|
<div class="table-th !flex-none w-220">评价时间</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-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 }}
|
</div>
|
<div class="leading-20">
|
<span>规格：{{ item.flowerUnit }}</span>
|
</div>
|
<div class="leading-20">
|
<span>等级：{{ item.flowerLevel }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="table-td !flex-none w-220 flex items-center">
|
<div class="leading-20">{{ item.orderNo }}</div>
|
</div>
|
<div class="table-td !flex-none w-120 flex items-center">
|
<div class="leading-20" style="color: #3598db">{{item.commentGrade }}星</div>
|
</div>
|
<div class="table-td">
|
<div class="leading-20">{{ item.supplierName }}[ID:{{ item.supplierId }}]</div>
|
</div>
|
|
<div class="table-td">
|
<div class="leading-20">{{ item.comment }}</div>
|
</div>
|
|
<div class="table-td !flex-none w-220 flex items-center">
|
<div class="leading-20">
|
<div class="leading-20">
|
<span>UID： {{ item.customerId }}</span>
|
</div>
|
<div class="leading-20">
|
<span>昵称： {{ item.customerName }}</span>
|
</div>
|
|
</div>
|
</div>
|
|
<div class="table-td !flex-none w-220 flex items-center">
|
<div class="leading-20">{{ item.createTime }}</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.showFlag == '1'" type="text" @click="onShow(item)" >显示</el-button>
|
<el-button v-if="item.showFlag == '0'" type="text" @click="onHide(item)" >隐藏</el-button>
|
<el-button type="text" @click="onHandle(item)" >回复</el-button>
|
<el-button type="text" @click="onDelete(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)
|
},
|
onDelete(item) {
|
this.$emit('delete', item)
|
},
|
onShow(item) {
|
this.$emit('show', item)
|
},
|
onHide(item) {
|
this.$emit('hide', 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>
|
