<template>
|
<GlobalWindow title="套餐卡详情" :visible.sync="isShowModal" width="1000px" @close="close" @confirm="close">
|
<div>
|
<div class="modal_title">套餐名称：{{ detail.name }}</div>
|
<div class="place">
|
<span>套餐号：{{ detail.code }}</span>
|
<span v-if="detail.useType == 1">有效期：{{ detail.useStartDate }}至{{ detail.useEndDate }}</span>
|
<span v-if="detail.useType == 0">有效期：{{ detail.useStartDate }}至{{ detail.useEndDate }}</span>
|
<span v-if="detail.useType == 2">有效期：{{ detail.useStartDate }}至{{ detail.useEndDate }}</span>
|
</div>
|
<div class="df_ac">
|
<el-tabs style="flex: 1;" v-model="activeTab" @tab-click="handleClick">
|
<el-tab-pane label="套餐使用明细" name="0" />
|
<el-tab-pane label="套餐操作记录" name="2" />
|
</el-tabs>
|
<div style="border-bottom: 2px solid #e5e7ec; margin-top: 1px;">{{ activeTab == 0 ? '使用情况' : '操作情况' }}：{{ pagination.total }}次</div>
|
</div>
|
<el-table v-if="activeTab == 0" v-loading="loading" :data="list" stripe border>
|
<el-table-column prop="createDate" align="center" label="使用时间" min-width="120" show-overflow-tooltip />
|
<el-table-column prop="goodsorderId" align="center" label="关联订单" min-width="140" show-overflow-tooltip />
|
<el-table-column prop="" align="center" label="骑车时长" min-width="80" show-overflow-tooltip>
|
<template v-slot="{ row }">
|
{{ row.rideTime }}分钟
|
</template>
|
</el-table-column>
|
<el-table-column prop="ridePrice" align="center" label="抵扣金额" min-width="100" show-overflow-tooltip />
|
</el-table>
|
<el-table v-if="activeTab == 2" v-loading="loading" :data="list" stripe border>
|
<el-table-column prop="createDate" align="center" label="操作时间" min-width="120" show-overflow-tooltip />
|
<el-table-column prop="info" align="center" label="操作类型" min-width="100" show-overflow-tooltip>
|
<template v-slot="{ row }">
|
<span v-if="row.type == 0">用户骑行使用</span>
|
<span v-if="row.type == 1">套餐作废</span>
|
<span v-if="row.type == 2">套餐调整</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="editInfo" align="center" label="操作备注" min-width="200" show-overflow-tooltip />
|
<el-table-column prop="creatorName" align="center" label="操作人" min-width="80" show-overflow-tooltip />
|
</el-table>
|
<div class="table_btns">
|
<Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" />
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
<script>
|
import { comboSalerDetailPost, discountLogLog } from '@/api/business/combo.js'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BasePageTemp from '@/components/base/BasePageTemp'
|
export default {
|
name: 'ComboDetail',
|
extends: BasePageTemp,
|
components: {
|
GlobalWindow
|
},
|
data() {
|
return {
|
isShowModal: false,
|
activeTab: '0',
|
detail: {},
|
pagination: {
|
page: 1,
|
rows: 10
|
},
|
totalCount: 0,
|
list: [],
|
loading: false
|
}
|
},
|
created() {
|
// this.detail = this.$route.query
|
// this.comboDetail()
|
},
|
methods: {
|
getDetail(row) {
|
comboSalerDetailPost(row.id).then(res => {
|
this.detail = res
|
this.activeTab = '0'
|
this.getList()
|
}, () => {
|
|
})
|
},
|
handleClick(val) {
|
this.getList()
|
},
|
getList(page) {
|
const { pagination, activeTab, detail } = this
|
this.loading = true
|
if (page) { pagination.page = page }
|
discountLogLog({
|
model: {
|
type: activeTab,
|
discountMemberId: detail.id
|
},
|
capacity: pagination.pageSize,
|
page: pagination.page,
|
}).then(res => {
|
this.loading = false
|
this.list = res.records || []
|
this.pagination.total = res.total || 0
|
}, () => {
|
this.loading = false
|
})
|
},
|
close() {
|
this.isShowModal = false
|
this.$emit('close')
|
},
|
currentPageChange(val) {
|
this.pagination.page = val
|
this.comboDetail()
|
},
|
pageSizeChange(val) {
|
this.pagination.rows = val
|
this.comboDetail()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.modal_title {
|
font-size: 18px;
|
font-weight: 500;
|
margin-bottom: 6px;
|
}
|
|
.place {
|
color: #999999;
|
font-size: 13px;
|
display: flex;
|
margin-bottom: 8px;
|
|
span {
|
margin-right: 60px;
|
}
|
}
|
</style>
|
