118 lines
4.6 KiB
Vue
118 lines
4.6 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="head-container">
|
|
<el-button type="primary" icon="el-icon-plus" @click="$refs.addCoupon.show()">
|
|
添加优惠券
|
|
</el-button>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-table :data="tableData.data" v-loading="tableData.loading">
|
|
<el-table-column label="优惠券名称" prop="title"></el-table-column>
|
|
<el-table-column label="类型" prop="classType">
|
|
<template v-slot="scope">
|
|
{{ scope.row.classType | classTypeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="优惠类型" prop="type">
|
|
<template v-slot="scope">
|
|
{{ scope.row.type | typeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="折扣" prop="ratio"></el-table-column>
|
|
<el-table-column label="面额" prop="amount"></el-table-column>
|
|
<el-table-column label="满减限制" prop="limitAmount"></el-table-column>
|
|
<el-table-column label="发放数量" prop="number"></el-table-column>
|
|
<el-table-column label="限领数量" prop="limitNumber"></el-table-column>
|
|
<el-table-column label="剩余数量" prop="leftNumber"></el-table-column>
|
|
<el-table-column label="有效期" prop="effectType">
|
|
<template v-slot="scope">
|
|
{{ scope.row.effectType | effectTypeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="开始时间" prop="fromTime"></el-table-column>
|
|
<el-table-column label="到期时间" prop="toTime"></el-table-column>
|
|
<el-table-column label="商品列表" prop="relationIds" width="200">
|
|
<template v-slot="scope">
|
|
<div style="display: flex;" v-if="scope.row.classType == 'product'">
|
|
<el-image :src="scope.row.coverImg" style="width: 30px;height: 30px;"></el-image>
|
|
<span style="margin-left: 10px;">{{ scope.row.name }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
|
@current-change="paginationChange" @size-change="sizeChange"
|
|
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
|
</div>
|
|
<addCoupon ref="addCoupon" @success="resetHandle" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import couponEnum from './couponEnum'
|
|
import addCoupon from './components/addCoupon.vue'
|
|
import { tbMerchantCouponGet } from '@/api/shop'
|
|
export default {
|
|
components: { addCoupon },
|
|
data() {
|
|
return {
|
|
tableData: {
|
|
data: [],
|
|
page: 0,
|
|
size: 10,
|
|
loading: false,
|
|
total: 0
|
|
}
|
|
}
|
|
},
|
|
filters: {
|
|
classTypeFilter(value) {
|
|
return couponEnum.classType.find(item => item.value == value).label
|
|
},
|
|
typeFilter(value) {
|
|
return couponEnum.type.find(item => item.value == value).label
|
|
},
|
|
effectTypeFilter(value) {
|
|
return couponEnum.effectType.find(item => item.value == value).label
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTableData()
|
|
},
|
|
methods: {
|
|
// 重置查询
|
|
resetHandle() {
|
|
this.page = 0
|
|
this.getTableData()
|
|
},
|
|
// 分页大小改变
|
|
sizeChange(e) {
|
|
this.tableData.size = e
|
|
this.getTableData()
|
|
},
|
|
// 分页回调
|
|
paginationChange(e) {
|
|
this.tableData.page = e - 1
|
|
this.getTableData()
|
|
},
|
|
// 获取商品列表
|
|
async getTableData() {
|
|
this.tableData.loading = true
|
|
try {
|
|
const res = await tbMerchantCouponGet({
|
|
page: this.tableData.page,
|
|
size: this.tableData.size,
|
|
shopId: localStorage.getItem('shopId')
|
|
})
|
|
this.tableData.loading = false
|
|
this.tableData.data = res.content
|
|
this.tableData.total = res.totalElements
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |