<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="1000px"
|
:withFooter="false"
|
>
|
<div class="usage-detail">
|
<div class="info-header">
|
<div class="info-row">
|
<div class="info-item">
|
<span class="label">优惠券名称：</span>
|
<span class="value">{{ couponInfo.name || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">类型：</span>
|
<span class="value">
|
<span v-if="couponInfo.type === 0">平台满减券</span>
|
<span v-else>-</span>
|
</span>
|
</div>
|
<div class="info-item">
|
<span class="label">领用数量：</span>
|
<span class="value">{{ couponInfo.receivedCount || 0 }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">使用数量：</span>
|
<span class="value">{{ couponInfo.usedCount || 0 }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- <template v-slot:table-wrap> -->
|
<el-table
|
:height="500"
|
v-loading="isWorking.search"
|
:data="tableData.list"
|
stripe
|
>
|
<el-table-column label="序号" type="index" width="60px"></el-table-column>
|
<el-table-column prop="memberName" label="领用人" min-width="100px"></el-table-column>
|
<el-table-column prop="memberTelephone" label="领用手机号" min-width="120px"></el-table-column>
|
<el-table-column label="领用数量" min-width="80px">
|
<template slot-scope="{row}">
|
<span>1</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createDate" label="发放时间" min-width="160px"></el-table-column>
|
<el-table-column prop="validDate" label="领用时间" min-width="160px"></el-table-column>
|
<el-table-column label="限用时段" min-width="160px">
|
<template slot-scope="{row}">
|
<span>{{ row.startDate }} - {{ row.endDate }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="useDate" label="使用时间" min-width="160px"></el-table-column>
|
<el-table-column label="状态" min-width="100px">
|
<template slot-scope="{row}">
|
<el-tag v-if="row.status === 1" type="primary">待使用</el-tag>
|
<el-tag v-else-if="row.status === 2" type="success">已使用</el-tag>
|
<el-tag v-else-if="row.status === 3" type="danger">已失效</el-tag>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="text-align: right; margin-top: 20px;">
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
></pagination>
|
</div>
|
<!-- </template> -->
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Pagination from '@/components/common/Pagination'
|
import { fetchList } from '@/api/business/memberCoupon'
|
|
export default {
|
name: 'OperaCouponUsageDetail',
|
components: { GlobalWindow, Pagination },
|
data () {
|
return {
|
title: '领用明细',
|
visible: false,
|
couponId: '',
|
couponInfo: {},
|
tableData: {
|
list: [],
|
pagination: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0
|
}
|
},
|
isWorking: {
|
search: false
|
}
|
}
|
},
|
methods: {
|
open (row) {
|
this.title = '领用明细'
|
this.couponId = row.id
|
this.couponInfo = {
|
name: row.name,
|
type: row.type,
|
receivedCount: row.claimCount,
|
usedCount: row.usedCount
|
}
|
this.visible = true
|
this.search()
|
},
|
search () {
|
this.isWorking.search = true
|
fetchList({
|
capacity: this.tableData.pagination.pageSize,
|
page: this.tableData.pagination.currentPage,
|
model: {
|
couponId: this.couponId,
|
}
|
}).then(data => {
|
console.log(data)
|
this.tableData.list = data.records || []
|
this.tableData.pagination.total = data.total || 0
|
}).finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
handleSizeChange (val) {
|
this.tableData.pagination.pageSize = val
|
this.search()
|
},
|
handlePageChange (val) {
|
this.tableData.pagination.currentPage = val
|
this.search()
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.info-header {
|
margin-bottom: 20px;
|
}
|
.info-row {
|
display: flex;
|
gap: 30px;
|
padding: 15px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
}
|
.info-item {
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
}
|
.info-item .label {
|
color: #909399;
|
}
|
.info-item .value {
|
color: #606266;
|
font-weight: bold;
|
}
|
</style>
|
