424 lines
11 KiB
Vue
424 lines
11 KiB
Vue
<template>
|
||
<div class="mod-config">
|
||
<el-radio-group
|
||
v-model="currentState"
|
||
style="margin-bottom: 15px;"
|
||
@tab-click="handleClick"
|
||
>
|
||
<el-radio-button label="">全部</el-radio-button>
|
||
<el-radio-button label="0">生效中</el-radio-button>
|
||
<el-radio-button label="1">已过期</el-radio-button>
|
||
</el-radio-group>
|
||
<el-form
|
||
:inline="true"
|
||
:model="dataForm"
|
||
@keyup.enter.native="getDataList()"
|
||
>
|
||
<el-form-item>
|
||
<el-input
|
||
v-model="dataForm.couponName"
|
||
placeholder="参数名"
|
||
clearable
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="优惠券范围">
|
||
<el-select
|
||
v-model="dataForm.couponRange"
|
||
placeholder="请选择"
|
||
@change="
|
||
pageIndex = 1;
|
||
getDataList();
|
||
"
|
||
>
|
||
<el-option
|
||
v-for="item in rangList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="优惠券类型">
|
||
<el-select
|
||
v-model="dataForm.TypeList"
|
||
placeholder="请选择"
|
||
@change="
|
||
pageIndex = 1;
|
||
getDataList();
|
||
"
|
||
>
|
||
<el-option
|
||
v-for="item in TypeList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="getDataList()">查询</el-button>
|
||
<el-button
|
||
v-if="isAuth('book:coupon:save')"
|
||
type="primary"
|
||
@click="addOrUpdateHandle()"
|
||
>新增</el-button
|
||
>
|
||
<!-- <el-button v-if="isAuth('book:coupon:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table
|
||
:data="dataList"
|
||
border
|
||
v-loading="dataListLoading"
|
||
@selection-change="selectionChangeHandle"
|
||
style="width: 100%;"
|
||
>
|
||
<!-- <el-table-column
|
||
type="selection"
|
||
header-align="center"
|
||
align="center"
|
||
width="50">
|
||
</el-table-column> -->
|
||
<el-table-column
|
||
prop="id"
|
||
header-align="center"
|
||
align="center"
|
||
label="序号"
|
||
width="50"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="couponName"
|
||
header-align="center"
|
||
align="center"
|
||
label="优惠券名称"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
header-align="center"
|
||
align="center"
|
||
label="优惠券类型"
|
||
width="100px"
|
||
>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.effectType | getType }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="couponAmount"
|
||
header-align="center"
|
||
align="center"
|
||
label="面值"
|
||
width="90px"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="expirationDate"
|
||
header-align="center"
|
||
align="center"
|
||
label="时间"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.createTime"
|
||
>创建时间：{{ scope.row.createTime }}</span
|
||
>
|
||
<span v-if="scope.row.effectTime"
|
||
><br />生效时间：{{ scope.row.effectTime }}</span
|
||
>
|
||
<span v-if="scope.row.expireTime"
|
||
><br />结束时间：{{ scope.row.expireTime }}</span
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="couponRange"
|
||
header-align="center"
|
||
align="center"
|
||
label="优惠券范围"
|
||
>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.couponRange | getRange }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="totalCirculation"
|
||
header-align="center"
|
||
align="center"
|
||
label="发行数量"
|
||
width="90px"
|
||
>
|
||
</el-table-column><el-table-column
|
||
prop="grantCount"
|
||
header-align="center"
|
||
align="center"
|
||
label="已领取数量"
|
||
>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.grantCount }}
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
prop="useCount"
|
||
header-align="center"
|
||
align="center"
|
||
label="已使用数量">
|
||
</el-table-column> -->
|
||
<!-- <el-table-column
|
||
prop="receiveCount"
|
||
header-align="center"
|
||
align="center"
|
||
label="领取数量">
|
||
</el-table-column> -->
|
||
<el-table-column
|
||
prop="receiveCount"
|
||
header-align="center"
|
||
align="center"
|
||
label="操作"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
v-model="scope.row.currentState"
|
||
:active-value="0"
|
||
:inactive-value="1"
|
||
@change="changeStateHandle(scope.row.id, scope.row.currentState)"
|
||
active-text="发放中"
|
||
inactive-text="暂停发放"
|
||
>
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
fixed="right"
|
||
header-align="center"
|
||
align="center"
|
||
width="150"
|
||
label="操作"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
plain
|
||
@click="addOrUpdateHandle(scope.row.id)"
|
||
>修改</el-button
|
||
>
|
||
<el-button
|
||
type="danger"
|
||
size="small"
|
||
plain
|
||
@click="deleteHandle(scope.row.id)"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
@size-change="sizeChangeHandle"
|
||
@current-change="currentChangeHandle"
|
||
:current-page="pageIndex"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="pageSize"
|
||
:total="totalPage"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
>
|
||
</el-pagination>
|
||
<!-- 弹窗, 新增 / 修改 -->
|
||
<add-or-update
|
||
v-if="addOrUpdateVisible"
|
||
ref="addOrUpdate"
|
||
@refreshDataList="getDataList"
|
||
></add-or-update>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import global from "@/views/common/common.vue"; //引入共用组间
|
||
|
||
import AddOrUpdate from "./coupon-add-or-update";
|
||
import commentsListVue from "../book/commentsList.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
dataForm: {
|
||
couponName: "",
|
||
couponRange: "",
|
||
couponType: ""
|
||
},
|
||
currentState: "", // "currentState":""//当前状态 0 发放中 1结束
|
||
dataList: [],
|
||
rangList: global.rangList,
|
||
TypeList: global.TypeList,
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
totalPage: 0,
|
||
dataListLoading: false,
|
||
dataListSelections: [],
|
||
addOrUpdateVisible: false,
|
||
courseCateList: []
|
||
};
|
||
},
|
||
filters: {
|
||
// 格式化时间
|
||
getType(value) {
|
||
switch (value) {
|
||
case 0:
|
||
return "长期有效";
|
||
case 1:
|
||
return "领取生效";
|
||
case 2:
|
||
return "自定义";
|
||
}
|
||
},
|
||
getRange(value) {
|
||
switch (value) {
|
||
case 0:
|
||
return "无限制";
|
||
case 1:
|
||
return "课程券";
|
||
case 2:
|
||
return "课程品类券";
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
AddOrUpdate
|
||
},
|
||
activated() {
|
||
this.getDataList();
|
||
},
|
||
methods: {
|
||
// 修改优惠券状态
|
||
changeStateHandle(id, state) {
|
||
console.log("进来了");
|
||
this.$http({
|
||
url: this.$http.adornUrl("/common/coupon/updateCouponState"),
|
||
method: "post",
|
||
data: this.$http.adornData({
|
||
id: id,
|
||
currentState: state
|
||
})
|
||
})
|
||
.then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.$message({
|
||
message: "操作成功",
|
||
type: "success",
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.getDataList();
|
||
}
|
||
});
|
||
} else {
|
||
this.$message.error(data.msg);
|
||
}
|
||
})
|
||
.catch(e => {
|
||
this.$message.error(e.msg);
|
||
});
|
||
},
|
||
handleClick() {
|
||
console.log(this.currentState);
|
||
this.pageIndex = 1;
|
||
this.getDataList();
|
||
},
|
||
// 获取数据列表
|
||
getDataList() {
|
||
this.dataListLoading = true;
|
||
this.$http({
|
||
url: this.$http.adornUrl("/common/coupon/getCouponList"),
|
||
method: "post",
|
||
data: this.$http.adornData({
|
||
page: this.pageIndex,
|
||
limit: this.pageSize,
|
||
couponName: this.dataForm.couponName,
|
||
currentState: this.currentState, //当前状态 0 发放中 1结束
|
||
couponType: this.dataForm.couponType, //优惠券类型 0现金 1折扣
|
||
couponRange: this.dataForm.couponRange //优惠卷范围 0无限制 1课程卷 2课程品类卷
|
||
})
|
||
})
|
||
.then(({ data }) => {
|
||
if (data.code !== 0) return this.$message.error(data.msg);
|
||
if (data && data.code === 0) {
|
||
this.dataList = data.couponPage.records;
|
||
this.totalPage = data.couponPage.total;
|
||
} else {
|
||
this.dataList = [];
|
||
this.totalPage = 0;
|
||
}
|
||
this.dataListLoading = false;
|
||
})
|
||
.catch(e => {
|
||
this.$message.error(e.msg);
|
||
this.dataListLoading = false;
|
||
});
|
||
},
|
||
// 每页数
|
||
sizeChangeHandle(val) {
|
||
this.pageSize = val;
|
||
this.pageIndex = 1;
|
||
this.getDataList();
|
||
},
|
||
// 当前页
|
||
currentChangeHandle(val) {
|
||
this.pageIndex = val;
|
||
this.getDataList();
|
||
},
|
||
// 多选
|
||
selectionChangeHandle(val) {
|
||
this.dataListSelections = val;
|
||
},
|
||
// 新增 / 修改
|
||
addOrUpdateHandle(id) {
|
||
this.addOrUpdateVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.addOrUpdate.init(id);
|
||
// this.addOrUpdateVisible = true
|
||
});
|
||
},
|
||
// 删除
|
||
deleteHandle(id) {
|
||
// var ids = id ? [id] : this.dataListSelections.map(item => {
|
||
// return item.id
|
||
// })
|
||
this.$confirm(`确定对[id=${id}]进行删除操作?`, "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning"
|
||
}).then(() => {
|
||
this.$http({
|
||
url: this.$http.adornUrl("/common/coupon/delCoupon"),
|
||
method: "post",
|
||
data: this.$http.adornData({
|
||
id: id
|
||
})
|
||
}).then(({ data }) => {
|
||
if (data && data.code === 0) {
|
||
this.$message({
|
||
message: "操作成功",
|
||
type: "success",
|
||
duration: 1500,
|
||
onClose: () => {
|
||
this.getDataList();
|
||
}
|
||
});
|
||
} else {
|
||
this.$message.error(data.msg);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
},
|
||
watch: {
|
||
currentState: {
|
||
handler(val, oldVal) {
|
||
this.getDataList();
|
||
},
|
||
deep: true
|
||
}
|
||
}
|
||
};
|
||
</script>
|