<template>
|
<div>
|
<list-condition-template ref="table" :form="listQuery" :formLabel="formLabel"
|
:tableData="tableData" :total="total"
|
@page-info-change="handlePageInfoChange">
|
<template slot="otherElement">
|
<el-form-item>
|
<el-button size="mini" type="primary" @click="queryData">查询</el-button>
|
<el-button size="mini" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</template>
|
<template slot="operationSection">
|
<el-button size="mini" type="success" @click="addItem">新增</el-button>
|
</template>
|
<template slot="columns">
|
<el-table-column label="优惠名称" prop="couponName" show-overflow-tooltip></el-table-column>
|
<el-table-column label="优惠券类型" prop="recordType" width="100px">
|
<template slot-scope="scope">
|
{{getArrayLable(recordTypeArr,scope.row.recordType)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="已领取" prop="receiveNum" width="100px"></el-table-column>
|
<el-table-column label="发放总量" prop="totalAmountIssued" width="100px">
|
<template slot-scope="scope">
|
{{scope.row.totalAmountIssued === -1 ? '不限制' : scope.row.totalAmountIssued}}
|
</template>
|
</el-table-column>
|
<el-table-column label="用券时间" width="300px" show-overflow-tooltip>
|
<template slot-scope="scope">
|
<span v-if="scope.row.couponTimeType === '2'">{{scope.row.effectiveStartDate}} ~
|
{{scope.row.effectiveEndDate}}</span>
|
<span v-else>领取{{scope.row.effectiveDays}}日内有效</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" width="155px" prop="createTime"></el-table-column>
|
<el-table-column label="启用状态" width="120px">
|
<template slot-scope="scope">
|
<span class="statusTag"
|
:style="{ background: scope.row.recordStatus === '1' ? '#52c41a' :'#f5222d'}"></span>
|
<span>{{scope.row.recordStatus === '1' ? '启用' : '停用'}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="`${4 * $store.getters.colSize}px`">
|
<template slot-scope="scope">
|
<wly-btn @click="detailsInfo(scope.row,scope.$index)">详情</wly-btn>
|
<wly-btn type="primary" v-if="!scope.row.receiveNum && scope.row.status !== '3'"
|
@click="editItem(scope.row,scope.$index)">编辑</wly-btn>
|
<wly-btn type="primary" @click="editItem(scope.row,scope.$index,'copy')">复制</wly-btn>
|
<wly-btn :type="scope.row.recordStatus === '1' ? 'danger' :'success'"
|
v-if="scope.row.receiveNum !== scope.row.totalAmountIssued && scope.row.status !== '3'"
|
@click="updateState(scope.row,scope.$index)">{{scope.row.recordStatus === '1' ? '停用' : '启用'}}</wly-btn>
|
<wly-btn type="warning" v-if="scope.row.receiveNum"
|
@click="getReceiveRecordList(scope.row,scope.$index)">领用记录</wly-btn>
|
<wly-btn type="primary"
|
v-if=" scope.row.recordType !== '7' && scope.row.areSell === '2' && scope.row.recordStatus === '1'"
|
@click="delivery(scope.row,scope.$index)">派发</wly-btn>
|
<!-- <wly-btn type="danger" v-if="scope.row.recordStatus === '2'" @click="deleteItem(scope.row,scope.$index)">删除</wly-btn> -->
|
</template>
|
</el-table-column>
|
</template>
|
</list-condition-template>
|
<el-dialog :visible.sync="dialogVisible" title="优惠券详情" :close-on-click-modal="false"
|
:modal-append-to-body="false" width="40%">
|
<coupon-info :form="form"></coupon-info>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="dialogVisible=false">关闭</el-button>
|
</div>
|
</el-dialog>
|
<receive-record :show.sync='selectedDialog.show' :title="selectedDialog.title"
|
:recordTypeArr="recordTypeArr"
|
:couponInfoId="selectedDialog.id"></receive-record>
|
<delivery-coupon :show.sync="deliveryCouponDialogVisible"
|
@hand-delicery-coupon-success="handDeliceryCouponSuccess"
|
:rowInfo="form"></delivery-coupon>
|
</div>
|
</template>
|
<script>
|
import couponApi from '@/api/promotion/coupon'
|
import receiveRecord from '@/views/couponMgt/components/receiveRecord.vue'
|
import couponInfo from '@/views/couponMgt/components/couponInfo.vue'
|
import couponType from '@/utils/constant/couponType'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
import deliveryCoupon from '@/views/couponMgt/components/deliveryCoupon.vue'
|
|
export default {
|
components: { receiveRecord, couponInfo, deliveryCoupon },
|
data() {
|
return {
|
dialogVisible: false,
|
recordTypeArr: couponType,
|
statusArr: [
|
{
|
id: '1',
|
name: '启用',
|
type: 'success'
|
},
|
{
|
id: '2',
|
name: '停用',
|
type: 'danger'
|
},
|
{
|
id: '3',
|
name: '过期',
|
type: 'info'
|
}
|
],
|
tableData: [],
|
total: 0,
|
listQuery: {
|
couponName: null,
|
recordStatus: null
|
},
|
selectedDialog: {
|
show: false,
|
title: '领用记录',
|
id: null
|
},
|
formLabel: [
|
{
|
model: 'couponName',
|
label: '优惠券名称',
|
labelWidth: '90px',
|
type: 'input'
|
},
|
{
|
model: 'recordStatus',
|
label: '状态',
|
type: 'select',
|
opts: [
|
{
|
id: '1',
|
name: '启用'
|
},
|
{
|
id: '2',
|
name: '停用'
|
}
|
]
|
}
|
],
|
form: {},
|
deliveryCouponDialogVisible: false // 派发优惠券弹窗状态
|
}
|
},
|
/**
|
* 数据变化后刷新列表
|
*/
|
activated() {
|
this.queryList(this.$refs.table.getPageInfo())
|
},
|
methods: {
|
/**
|
* 派发优惠券成功子组件传递回来的事件
|
*/
|
handDeliceryCouponSuccess() {
|
this.deliveryCouponDialogVisible = false // 关闭派发优惠券弹窗
|
this.$refs.table.changeCondition() // 刷新列表
|
},
|
/**
|
* 查看详情
|
*/
|
detailsInfo(row, index) {
|
couponApi.detailsInfo({ couponInfoId: row.couponInfoId }).then(res => {
|
if (res.data) {
|
this.form = res.data
|
this.form.recordType = getArrayLable(this.recordTypeArr, res.data.recordType)
|
this.dialogVisible = true
|
}
|
})
|
},
|
/**
|
*派发优惠券
|
*/
|
delivery(row, index) {
|
this.form = row
|
this.deliveryCouponDialogVisible = true // 打开派发优惠券弹窗
|
// this.$confirm('确认派发？', '派发', {
|
// confirmButtonText: '确定',
|
// cancelButtonText: '取消',
|
// type: 'warning'
|
// }).then(() => {
|
// couponApi.delivery({ couponInfoId: row.couponInfoId }).then(res => {
|
// if (res.data) {
|
// this.$message({
|
// message: '派发成功',
|
// type: 'success'
|
// })
|
// this.queryData()
|
// }
|
// })
|
// }).catch(() => { })
|
},
|
/**
|
* 获取数组的label
|
*/
|
getArrayLable,
|
/**
|
* 获取领用记录列表
|
*/
|
getReceiveRecordList(row, index) {
|
this.selectedDialog.show = true
|
this.selectedDialog.id = row.couponInfoId
|
},
|
/**
|
* 新增
|
*/
|
addItem() {
|
this.$router.push({ name: 'addCouponMgtInfo' })
|
},
|
/**
|
*编辑
|
*/
|
editItem(row, index, f) {
|
const query = {
|
id: row.couponInfoId
|
}
|
if (f === 'copy') {
|
query.isCopy = true
|
}
|
this.$router.push({ name: 'editCouponMgt', query })
|
},
|
/**
|
* 修改状态
|
*/
|
updateState(row, index) {
|
const status = row.recordStatus === '1' ? '2' : '1'
|
couponApi.updateState({ couponInfoId: row.couponInfoId, recordStatus: status }).then(res => {
|
if (res.data) {
|
row.recordStatus = status
|
this.$message({
|
message: '状态修改成功',
|
type: 'success'
|
})
|
}
|
})
|
},
|
/**
|
* 删除
|
*/
|
deleteItem(row, index) {
|
this.$confirm('优惠卷删除后，用户的优惠卷无论是否到期或使用都将作废，确认要删除？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
couponApi.deleteItem({ couponInfoId: row.couponInfoId }).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '操作成功',
|
type: 'success'
|
})
|
this.queryData()
|
}
|
})
|
}).catch(() => { })
|
},
|
/**
|
* '分页信息改变时查询列表
|
*/
|
handlePageInfoChange(pageInfo) {
|
this.queryList(pageInfo)
|
},
|
|
/**
|
* 重置
|
*/
|
resetQuery() {
|
this.$refs.table.reloadCurrent()
|
},
|
/**
|
* 点击查询按钮
|
*/
|
queryData() {
|
this.$refs.table.changeCondition()
|
},
|
/**
|
* 查询列表
|
*/
|
queryList(pageInfo = { pageNum: 1, pageSize: 10 }) {
|
couponApi.getList({ param: this.listQuery, ...pageInfo }).then(res => {
|
if (res.data) {
|
this.tableData = res.data.list
|
this.total = res.data.total
|
}
|
})
|
}
|
}
|
}
|
</script>
|
