优惠券

This commit is contained in:
闫晓茹 2023-02-27 11:11:13 +08:00
parent 61850e9244
commit 7b2b17aff9
3 changed files with 698 additions and 5 deletions

44
src/api/system/coupon.js Normal file
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询优惠券信息列表
export function listCoupon(query) {
return request({
url: '/system/coupon/list',
method: 'get',
params: query
})
}
// 查询优惠券信息详细
export function getCoupon(id) {
return request({
url: '/system/coupon/' + id,
method: 'get'
})
}
// 新增优惠券信息
export function addCoupon(data) {
return request({
url: '/system/coupon/add',
method: 'post',
data: data
})
}
// 修改优惠券信息
export function updateCoupon(data) {
return request({
url: '/system/coupon/edit',
method: 'post',
data: data
})
}
// 删除优惠券信息
export function delCoupon(id) {
return request({
url: '/system/coupon/' + id,
method: 'delete'
})
}

View File

@ -0,0 +1,647 @@
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-form-item label="优惠券名称" prop="couponTitle">
<el-input
v-model="queryParams.couponTitle"
placeholder="请输入优惠券名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="优惠券编码" prop="couponCode">
<el-input
v-model="queryParams.couponCode"
placeholder="请输入优惠券编码"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="优惠券有效期(天)" prop="couponReductionDays">
<el-input
v-model="queryParams.couponReductionDays"
placeholder="请输入优惠券有效期,单位:天"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="优惠券面额" prop="couponPrice">
<el-input
v-model="queryParams.couponPrice"
placeholder="请输入优惠券面额"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="优惠券适用门槛" prop="couponConsumePrice">
<el-input
v-model="queryParams.couponConsumePrice"
placeholder="请输入优惠券适用门槛"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<!-- <el-form-item label="优惠券概述,包括使用范围,使用注意事项等信息" prop="couponDescription">
<el-input
v-model="queryParams.couponDescription"
placeholder="请输入优惠券概述,包括使用范围,使用注意事项等信息"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="发放数量" prop="receiveCount">
<el-input
v-model="queryParams.receiveCount"
placeholder="请输入发放数量"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="发放数量上限" prop="receiveLimitCount">
<el-input
v-model="queryParams.receiveLimitCount"
placeholder="请输入发放数量上限"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="全部商品ALL_PRODUCT指定商品SPECIFIED_COMMODITY" prop="useScope">
<el-input
v-model="queryParams.useScope"
placeholder="请输入全部商品ALL_PRODUCT指定商品SPECIFIED_COMMODITY"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<!-- <el-form-item label="显示顺序" prop="showSort">
<el-input
v-model="queryParams.showSort"
placeholder="请输入显示顺序"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item> -->
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:coupon:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:coupon:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:coupon:remove']"
>删除</el-button
>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:coupon:export']"
>导出</el-button
>
</el-col> -->
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="couponList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="主键id" align="center" prop="id" /> -->
<el-table-column label="优惠券名称" align="center" prop="couponTitle" show-overflow-tooltip />
<el-table-column label="优惠券编码" align="center" prop="couponCode" />
<el-table-column label="优惠券类型" align="center" prop="couponType">
<template slot-scope="scope">
{{ scope.row.couponType == "FULL_REDUCTION_COUPON" ? "满减券" : "" }}
{{ scope.row.couponType == "CASH_COUPON" ? "代金券" : "" }}
{{ scope.row.couponType == "EXCHANGE_COUPON" ? "兑换券" : "" }}
{{ scope.row.couponType == "DISCOUNT_COUPON" ? "抵扣券" : "" }}
</template>
</el-table-column>
<el-table-column
label="优惠券有效期(天)"
align="center"
prop="couponReductionDays"
/>
<el-table-column label="优惠券面额" align="center" prop="couponPrice" />
<el-table-column
label="优惠券适用门槛"
align="center"
prop="couponConsumePrice"
/>
<!-- <el-table-column label="优惠券概述" align="center" prop="couponDescription" /> -->
<el-table-column label="领取方式" align="center" prop="receiveType">
<template slot-scope="scope">
{{ scope.row.receiveType == "NEW_PEOPLE_WELFARE" ? "新人福利" : "" }}
{{ scope.row.receiveType == "EVENT_GIFT" ? "活动赠送" : "" }}
{{ scope.row.receiveType == "CONSUME_REBATE" ? "消费返券" : "" }}
</template>
</el-table-column>
<!-- <el-table-column label="发放数量" align="center" prop="receiveCount" />
<el-table-column label="发放数量上限" align="center" prop="receiveLimitCount" /> -->
<!-- <el-table-column label="全部商品" align="center" prop="useScope">
<template slot-scope="scope">
{{
scope.row.useScope == "ALL_PRODUCT" ? "全部商品" : ""
}}
{{ scope.row.useScope == "SPECIFIED_COMMODITY" ? "指定商品" : "" }}
</template>
</el-table-column> -->
<el-table-column label="显示顺序" align="center" prop="showSort" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:coupon:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:coupon:remove']"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改优惠券信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="130px"
:inline="true"
>
<el-form-item label="优惠券名称" prop="couponTitle" >
<el-input
v-model="form.couponTitle"
maxlength="100"
placeholder="请输入优惠券名称"
style="width: 220px"
/>
</el-form-item>
<!-- <el-form-item label="优惠券编码" prop="couponCode">
<el-input v-model="form.couponCode" placeholder="请输入优惠券编码" />
</el-form-item> -->
<el-form-item label="优惠券有效期(天)" prop="couponReductionDays">
<el-input
maxlength="5"
v-model.number="form.couponReductionDays"
placeholder="请输入优惠券有效期,单位:天"
style="width: 220px"
/>
</el-form-item>
<el-form-item label="优惠券面额" prop="couponPrice">
<el-input
v-model.number="form.couponPrice"
maxlength="8"
placeholder="请输入优惠券面额"
style="width: 220px"
/>
</el-form-item>
<el-form-item label="优惠券适用门槛" prop="couponConsumePrice">
<el-input
maxlength="8"
v-model.number="form.couponConsumePrice"
placeholder="请输入优惠券适用门槛"
style="width: 220px"
/>
</el-form-item>
<el-form-item label="领取方式" prop="receiveType">
<el-select
style="width: 220px"
clearable
v-model="form.receiveType"
placeholder="请选择领取方式"
>
<el-option
v-for="item in option"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="优惠券类型" prop="couponType">
<el-select
style="width: 220px"
clearable
v-model="form.couponType"
placeholder="请选择优惠券类型"
>
<el-option
v-for="item in couponTypeoption"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="显示顺序" prop="showSort">
<el-input
v-model="form.showSort"
placeholder="请输入显示顺序"
oninput="value=value.replace(/[^\d]/g,'')"
maxlength="5"
style="width: 220px"
/>
</el-form-item>
<el-form-item label="优惠券概述" prop="couponDescription">
<el-input
type="textarea"
:rows="5"
maxlength="300"
style="width: 540px"
v-model="form.couponDescription"
placeholder="请输入优惠券概述,包括使用范围,使用注意事项等信息"
/>
</el-form-item>
<!-- <el-form-item label="发放数量" prop="receiveCount">
<el-input v-model="form.receiveCount" placeholder="请输入发放数量" />
</el-form-item>
<el-form-item label="发放数量上限" prop="receiveLimitCount">
<el-input v-model="form.receiveLimitCount" placeholder="请输入发放数量上限" />
</el-form-item> -->
<!-- <el-form-item label="全部商品" prop="useScope">
<el-select
style="width: 220px"
clearable
v-model="form.useScope"
placeholder="请选择全部商品"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> -->
<!-- </el-form-item> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listCoupon,
getCoupon,
delCoupon,
addCoupon,
updateCoupon,
} from "@/api/system/coupon";
export default {
name: "Coupon",
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
couponList: [],
//
title: "",
couponTypeoption: [
{
value: "FULL_REDUCTION_COUPON",
label: "满减券",
},
{
value: "CASH_COUPON",
label: "代金券",
},
{
value: "EXCHANGE_COUPON",
label: "兑换券",
},
{
value: "DISCOUNT_COUPON",
label: "抵扣券",
},
],
// options: [
// {
// value: "ALL_PRODUCT",
// label: "",
// },
// {
// value: "SPECIFIED_COMMODITY",
// label: "",
// },
// ],
option: [
{
value: "NEW_PEOPLE_WELFARE",
label: "新人福利",
},
{
value: "EVENT_GIFT",
label: "活动赠送",
},
{
value: "CONSUME_REBATE",
label: "消费返券",
},
],
value: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
couponTitle: null,
couponCode: null,
couponType: null,
couponReductionDays:null,
couponPrice: null,
couponConsumePrice: null,
couponDescription: null,
receiveType: null,
receiveCount: null,
receiveLimitCount: null,
useScope: null,
showSort: null,
},
//
form: {},
//
rules: {
couponTitle:[
{
required: true,
message: "请输入优惠券名称",
trigger: "blur"
}
],
couponType: [
{
required: true,
message: "请选择优惠券类型",
trigger: "blur"
}
],
couponReductionDays: [
{
required: true,
message: "请输入优惠券有效期",
trigger: "blur"
}
],
couponPrice: [
{
required: true,
message: "请输入优惠券面额",
trigger: "blur"
}
],
couponConsumePrice: [
{
required: true,
message: "请输入优惠券面额",
trigger: "blur"
}
],
couponDescription: [
{
required: true,
message: "请输入优惠券概述",
trigger: "blur"
}
],
receiveType: [
{
required: true,
message: "请选择领取方式",
trigger: "blur"
}
],
// useScope: [
// {
// required: true,
// message: "",
// trigger: "blur"
// }
// ],
showSort: [
{
required: true,
message: "请输入显示顺序",
trigger: "blur"
}
],
},
};
},
created() {
this.getList();
},
methods: {
/** 查询优惠券信息列表 */
getList() {
this.loading = true;
listCoupon(this.queryParams).then((response) => {
this.couponList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
couponTitle: null,
couponCode: null,
couponType: null,
couponReductionDays: null,
couponPrice: null,
couponConsumePrice: null,
couponDescription: null,
receiveType: null,
receiveCount: null,
receiveLimitCount: null,
useScope: null,
showSort: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加优惠券信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getCoupon(id).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改优惠券信息";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateCoupon(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addCoupon(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除优惠券信息编号为"' + ids + '"的数据项?')
.then(function () {
return delCoupon(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/coupon/export",
{
...this.queryParams,
},
`coupon_${new Date().getTime()}.xlsx`
);
},
},
};
</script>

View File

@ -329,12 +329,14 @@
/>
</el-form-item>
<el-form-item label="系统设置内容" prop="settingsContent">
<editor
@imgs="imgs"
<el-input
type="textarea"
:rows="5"
style="width: 540px"
placeholder="请输入系统设置内容"
v-model="form.settingsContent"
:min-height="192"
style="width: 80%; margin-top: -28px; margin-left: 110px"
/>
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">