Skip to content

Commit c7ed529

Browse files
YunaiVYunaiV
committed
promotion：增加限时折扣的基础代码
1 parent 89af6ca commit c7ed529

File tree

2 files changed

+298
-0
lines changed

2 files changed

+298
-0
lines changed

‎src/api/mall/promotion/discountActivity.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import request from '@/utils/request'
2+
3+
// 创建限时折扣活动
4+
export function createDiscountActivity(data) {
5+
return request({
6+
url: '/promotion/discount-activity/create',
7+
method: 'post',
8+
data: data
9+
})
10+
}
11+
12+
// 更新限时折扣活动
13+
export function updateDiscountActivity(data) {
14+
return request({
15+
url: '/promotion/discount-activity/update',
16+
method: 'put',
17+
data: data
18+
})
19+
}
20+
21+
// 关闭限时折扣活动
22+
export function closeDiscountActivity(id) {
23+
return request({
24+
url: '/promotion/discount-activity/close?id=' + id,
25+
method: 'put'
26+
})
27+
}
28+
29+
// 删除限时折扣活动
30+
export function deleteDiscountActivity(id) {
31+
return request({
32+
url: '/promotion/discount-activity/delete?id=' + id,
33+
method: 'delete'
34+
})
35+
}
36+
37+
// 获得限时折扣活动
38+
export function getDiscountActivity(id) {
39+
return request({
40+
url: '/promotion/discount-activity/get?id=' + id,
41+
method: 'get'
42+
})
43+
}
44+
45+
// 获得限时折扣活动分页
46+
export function getDiscountActivityPage(query) {
47+
return request({
48+
url: '/promotion/discount-activity/page',
49+
method: 'get',
50+
params: query
51+
})
52+
}

‎src/views/mall/promotion/discountActivity/index.vue

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
<template>
2+
<div class="app-container">
3+
4+
<!-- 搜索工作栏 -->
5+
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
6+
<el-form-item label="活动名称" prop="name">
7+
<el-input v-model="queryParams.name" placeholder="请输入活动名称" clearable @keyup.enter.native="handleQuery"/>
8+
</el-form-item>
9+
<el-form-item label="活动状态" prop="status">
10+
<el-select v-model="queryParams.status" placeholder="请选择活动状态" clearable size="small">
11+
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.PROMOTION_ACTIVITY_STATUS)"
12+
:key="dict.value" :label="dict.label" :value="dict.value"/>
13+
</el-select>
14+
</el-form-item>
15+
<el-form-item label="创建时间" prop="createTime">
16+
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
17+
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
18+
</el-form-item>
19+
<el-form-item>
20+
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
21+
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
22+
</el-form-item>
23+
</el-form>
24+
25+
<!-- 操作工具栏 -->
26+
<el-row :gutter="10" class="mb8">
27+
<el-col :span="1.5">
28+
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
29+
v-hasPermi="['promotion:discount-activity:create']">新增</el-button>
30+
</el-col>
31+
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
32+
</el-row>
33+
34+
<!-- 列表 -->
35+
<el-table v-loading="loading" :data="list">
36+
<el-table-column label="活动名称" align="center" prop="name" />
37+
<el-table-column label="活动时间" align="center" prop="startTime" width="240">
38+
<template slot-scope="scope">
39+
<div>开始：{{ parseTime(scope.row.startTime) }}</div>
40+
<div>结束：{{ parseTime(scope.row.endTime) }}</div>
41+
</template>
42+
</el-table-column>
43+
<el-table-column label="状态" align="center" prop="status">
44+
<template slot-scope="scope">
45+
<dict-tag :type="DICT_TYPE.PROMOTION_ACTIVITY_STATUS" :value="scope.row.status" />
46+
</template>
47+
</el-table-column>
48+
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
49+
<template slot-scope="scope">
50+
<span>{{ parseTime(scope.row.createTime) }}</span>
51+
</template>
52+
</el-table-column>
53+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
54+
<template slot-scope="scope">
55+
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
56+
v-if="scope.row.status !== PromotionActivityStatusEnum.CLOSE.type"
57+
v-hasPermi="['promotion:discount-activity:update']">修改</el-button>
58+
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleClose(scope.row)"
59+
v-if="scope.row.status !== PromotionActivityStatusEnum.CLOSE.type &&
60+
scope.row.status !== PromotionActivityStatusEnum.END.type"
61+
v-hasPermi="['promotion:discount-activity:close']">关闭</el-button>
62+
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
63+
v-if="scope.row.status === PromotionActivityStatusEnum.CLOSE.type"
64+
v-hasPermi="['promotion:discount-activity:delete']">删除</el-button>
65+
</template>
66+
</el-table-column>
67+
</el-table>
68+
<!-- 分页组件 -->
69+
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
70+
@pagination="getList"/>
71+
72+
<!-- 对话框(添加 / 修改) -->
73+
<el-dialog :title="title" :visible.sync="open" width="600px" v-dialogDrag append-to-body>
74+
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
75+
<el-form-item label="活动名称" prop="name">
76+
<el-input v-model="form.name" placeholder="请输入活动名称" />
77+
</el-form-item>
78+
<el-form-item label="备注" prop="remark">
79+
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
80+
</el-form-item>
81+
<el-form-item label="活动时间" prop="startAndEndTime">
82+
<el-date-picker clearable v-model="form.startAndEndTime" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
83+
value-format="timestamp" placeholder="选择开始时间" style="width: 480px" />
84+
</el-form-item>
85+
</el-form>
86+
<div slot="footer" class="dialog-footer">
87+
<el-button type="primary" @click="submitForm">确 定</el-button>
88+
<el-button @click="cancel">取 消</el-button>
89+
</div>
90+
</el-dialog>
91+
</div>
92+
</template>
93+
94+
<script>
95+
import { createDiscountActivity, updateDiscountActivity, deleteDiscountActivity, getDiscountActivity, getDiscountActivityPage } from "@/api/mall/promotion/discountActivity";
96+
import {PromotionActivityStatusEnum, PromotionProductScopeEnum} from "@/utils/constants";
97+
import {closeRewardActivity} from "@/api/mall/promotion/rewardActivity";
98+
99+
export default {
100+
name: "DiscountActivity",
101+
components: {
102+
},
103+
data() {
104+
return {
105+
// 遮罩层
106+
loading: true,
107+
// 导出遮罩层
108+
exportLoading: false,
109+
// 显示搜索条件
110+
showSearch: true,
111+
// 总条数
112+
total: 0,
113+
// 限时折扣活动列表
114+
list: [],
115+
// 弹出层名称
116+
title: "",
117+
// 是否显示弹出层
118+
open: false,
119+
// 查询参数
120+
queryParams: {
121+
pageNo: 1,
122+
pageSize: 10,
123+
name: null,
124+
status: null,
125+
createTime: [],
126+
},
127+
// 表单参数
128+
form: {},
129+
// 表单校验
130+
rules: {
131+
name: [{ required: true, message: "活动名称不能为空", trigger: "blur" }],
132+
startAndEndTime: [{ required: true, message: "活动时间不能为空", trigger: "blur" }],
133+
},
134+
// 商品列表
135+
productSpus: [], // TODO 芋艿：需要重新写下
136+
// 如下的变量，主要为了 v-if 判断可以使用到
137+
PromotionProductScopeEnum: PromotionProductScopeEnum,
138+
PromotionActivityStatusEnum: PromotionActivityStatusEnum,
139+
};
140+
},
141+
created() {
142+
this.getList();
143+
},
144+
methods: {
145+
/** 查询列表 */
146+
getList() {
147+
this.loading = true;
148+
// 执行查询
149+
getDiscountActivityPage(this.queryParams).then(response => {
150+
this.list = response.data.list;
151+
this.total = response.data.total;
152+
this.loading = false;
153+
});
154+
},
155+
/** 取消按钮 */
156+
cancel() {
157+
this.open = false;
158+
this.reset();
159+
},
160+
/** 表单重置 */
161+
reset() {
162+
this.form = {
163+
id: undefined,
164+
name: undefined,
165+
startAndEndTime: undefined,
166+
startTime: undefined,
167+
endTime: undefined,
168+
remark: undefined,
169+
};
170+
this.resetForm("form");
171+
},
172+
/** 搜索按钮操作 */
173+
handleQuery() {
174+
this.queryParams.pageNo = 1;
175+
this.getList();
176+
},
177+
/** 重置按钮操作 */
178+
resetQuery() {
179+
this.resetForm("queryForm");
180+
this.handleQuery();
181+
},
182+
/** 新增按钮操作 */
183+
handleAdd() {
184+
this.reset();
185+
this.open = true;
186+
this.title = "添加限时折扣活动";
187+
},
188+
/** 修改按钮操作 */
189+
handleUpdate(row) {
190+
this.reset();
191+
const id = row.id;
192+
getDiscountActivity(id).then(response => {
193+
this.form = response.data;
194+
this.form.startAndEndTime = [response.data.startTime, response.data.endTime];
195+
this.open = true;
196+
this.title = "修改限时折扣活动";
197+
});
198+
},
199+
/** 提交按钮 */
200+
submitForm() {
201+
this.$refs["form"].validate(valid => {
202+
if (!valid) {
203+
return;
204+
}
205+
this.form.startTime = this.form.startAndEndTime[0];
206+
this.form.endTime = this.form.startAndEndTime[1];
207+
// 修改的提交
208+
if (this.form.id != null) {
209+
updateDiscountActivity(this.form).then(response => {
210+
this.$modal.msgSuccess("修改成功");
211+
this.open = false;
212+
this.getList();
213+
});
214+
return;
215+
}
216+
// 添加的提交
217+
createDiscountActivity(this.form).then(response => {
218+
this.$modal.msgSuccess("新增成功");
219+
this.open = false;
220+
this.getList();
221+
});
222+
});
223+
},
224+
/** 删除按钮操作 */
225+
handleDelete(row) {
226+
const id = row.id;
227+
this.$modal.confirm('是否确认删除限时折扣活动编号为"' + id + '"的数据项?').then(function() {
228+
return deleteDiscountActivity(id);
229+
}).then(() => {
230+
this.getList();
231+
this.$modal.msgSuccess("删除成功");
232+
}).catch(() => {});
233+
},
234+
/** 关闭按钮操作 */
235+
handleClose(row) {
236+
const id = row.id;
237+
this.$modal.confirm('是否确认关闭限时折扣活动编号为"' + id + '"的数据项?').then(function() {
238+
return closeRewardActivity(id);
239+
}).then(() => {
240+
this.getList();
241+
this.$modal.msgSuccess("关闭成功");
242+
}).catch(() => {});
243+
}
244+
}
245+
};
246+
</script>

0 commit comments

Comments
 (0)