code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-22 02:45:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

适配重构促销

Browse Source
This commit is contained in:
paulGao
2021-12-11 13:50:58 +08:00
parent fd1d32d431
commit edef393535
40 changed files with 2532 additions and 1486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
manager/src/views/promotions/seckill/seckill-add.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120" :rules="formRule">
<div class="base-info-item">
<h4>基本信息</h4>
<div class="form-item-view">
<FormItem label="活动名称" prop="promotionName">
<Input
type="text"
v-model="form.promotionName"
placeholder="请填写活动名称"
clearable
style="width: 260px"
/>
</FormItem>
<FormItem label="报名截止时间" prop="applyEndTime">
<DatePicker
type="datetime"
v-model="form.applyEndTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择"
clearable
style="width: 200px"
>
</DatePicker>
</FormItem>
<FormItem label="活动开始时间" prop="startTime">
<DatePicker
type="datetime"
v-model="form.startTime"
format="yyyy-MM-dd"
placeholder="请选择"
clearable
style="width: 200px"
>
</DatePicker>
</FormItem>
<FormItem label="抢购时间段" prop="seckillPeriod">
<Tag
v-for="item in form.seckillPeriod"
:key="item"
:name="item"
closable
style="marrgin-left: 10px"
@on-close="removePeriodTime"
>{{ item >= 10 ? item : "0" + item }}:00</Tag
>
<InputNumber
:max="23"
:min="0"
v-model="periodTime"
v-show="showAddPeriod"
@on-blur="addPeriodTime"
></InputNumber>
<Button type="default" @click="addPeriod">添加时间段</Button>
</FormItem>
<FormItem label="申请规则" prop="seckillRule">
<Input
type="text"
v-model="form.seckillRule"
placeholder="申请规则"
clearable
style="width: 260px"
/>
</FormItem>
</div>
<div class="foot-btn">
<Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
>提交</Button
>
</div>
</div>
</Form>
</Card>
</div>
</template>
<script>
import { updateSeckill, seckillDetail } from "@/api/promotion";
export default {
name: "addSeckill",
data() {
return {
form: {
/** 活动名称 */
promotionName: "",
/** 报名截止时间 */
applyEndTime: "",
/** 活动开始时间 */
startTime: "",
/** 抢购时间段 */
seckillPeriod: [],
/** 申请规则 */
seckillRule: "",
promotionStatus: "NEW",
},
id: this.$route.query.id, // 活动id
periodTime: null, // 抢购时间段
showAddPeriod: false, // input显隐
submitLoading: false, // 添加或编辑提交状态
formRule: {
promotionName: [{ required: true, message: "请填写活动名称" }],
applyEndTime: [{ required: true, message: "请填写报名截止时间" }],
seckillPeriod: [{ required: true, message: "请填写抢购时间段" }],
startTime: [{ required: true, message: "请填写活动开始时间" }],
seckillRule: [{ required: true, message: "请输入申请规则" }],
},
};
},
mounted() {
// 如果id不为空则查询信息
if (this.id) {
this.getData();
}
},
methods: {
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "manager-seckill-add");
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
this.$router.go(-1);
},
// 获取详情数据
getData() {
seckillDetail(this.id).then((res) => {
if (res.success) {
let data = res.result;
data.seckillPeriod = res.result.hours.split(",");
this.form = data;
}
});
},
addPeriod() {
// 添加时间段显示input
this.addPeriodTime();
this.showAddPeriod = true;
},
addPeriodTime() {
// 添加秒杀时间段
this.showAddPeriod = false;
if (
this.periodTime !== null &&
!this.form.seckillPeriod.includes(this.periodTime)
) {
this.form.seckillPeriod.push(this.periodTime);
}
},
removePeriodTime(event, name) {
// 移除秒杀时间段
this.form.seckillPeriod = this.form.seckillPeriod.filter((i) => i !== name);
},
// // 申请截止时间格式化
// applyTimeChange (time) {
// console.log(time);
// this.form.applyEndTime = time
// },
// // 开始时间格式化
// startTimeChange (time) {
// this.form.startTime = time
// },
/** 添加秒杀活动 */
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
this.form.hours = this.form.seckillPeriod.toString();
delete this.form.createTime;
delete this.form.updateTime;
delete this.form.endTime;
delete this.form.seckillApplyList;
let params = this.form;
params.startTime = this.$options.filters.unixToDate(this.form.startTime / 1000);
params.applyEndTime = this.$options.filters.unixToDate(
this.form.applyEndTime / 1000
);
// 编辑
updateSeckill(params).then((res) => {
this.submitLoading = false;
if (res && res.success) {
this.$Message.success("编辑成功");
this.closeCurrentPage();
}
});
}
});
},
},
};
</script>
<style lang="scss" scoped>
h4 {
margin-bottom: 10px;
padding: 0 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
font-weight: bold;
color: #333;
font-size: 14px;
line-height: 40px;
text-align: left;
}
.ivu-form-item {
margin-bottom: 30px;
}
</style>

311
manager/src/views/promotions/seckill/seckill-goods.vue Normal file
View File

@@ -0,0 +1,311 @@
<template>
<div class="seckill-goods">
<Card>
<Table border :columns="columns" :data="data">
<template slot-scope="{ row }" slot="applyEndTime">
{{ unixDate(row.applyEndTime) }}
</template>
<template slot-scope="{ row }" slot="hours">
<Tag v-for="item in unixHours(row.hours)" :key="item">{{ item }}</Tag>
</template>
</Table>
<Table
:loading="loading"
border
class="operation"
:columns="goodsColumns"
:data="goodsList"
ref="table"
>
<template slot-scope="{ row }" slot="originalPrice">
<div>{{ row.originalPrice | unitPrice("￥") }}</div>
</template>
<template slot-scope="{ row }" slot="quantity">
<div>{{ row.quantity }}</div>
</template>
<template slot-scope="{ row }" slot="price">
<div>{{ row.price | unitPrice("￥") }}</div>
</template>
<template slot-scope="{ row }" slot="time">
<Tag>{{ row.timeLine + ":00" }}</Tag>
</template>
<template slot-scope="{ row }" slot="QRCode">
<img
v-if="row.QRCode"
:src="row.QRCode || '../../../assets/lili.png'"
width="50px"
height="50px"
alt=""
/>
</template>
<template slot-scope="{ row, index }" slot="action">
<Button
type="error"
size="small"
@click="delGoods(index,row)"
>删除
</Button>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
:current="searchForm.pageNumber + 1"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[10, 20, 50]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</Card>
</div>
</template>
<script>
import {
seckillGoodsList,
seckillDetail,
auditApplySeckill,
delSeckillGoods
} from "@/api/promotion.js";
export default {
data() {
return {
promotionStatus: "", // 活动状态
showModal: false, // modal显隐
openTip: true, // 显示提示
loading: false, // 表单加载状态
submitLoading: false, // 加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 0, // 当前页数
pageSize: 100, // 页面大小
},
total: 0, // 总数
selectList: [], // 多选数据
selectCount: 0, // 多选计数
data: [], // 表单数据
columns: [ // 表头
{
title: "活动名称",
key: "promotionName",
minWidth: 120,
},
{
title: "活动开始时间",
key: "startTime",
},
{
title: "报名截止时间",
slot: "applyEndTime",
},
{
title: "时间场次",
slot: "hours",
},
{
title: "活动状态",
key: "promotionStatus",
minWidth: 80,
sortable: false,
render: (h, params) => {
if (params.row.promotionStatus == "NEW") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "新建",
},
}),
]);
} else if (params.row.promotionStatus == "START") {
return h("div", [
h("Badge", {
props: {
status: "success",
text: "开始",
},
}),
]);
} else if (params.row.promotionStatus == "END") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "结束",
},
}),
]);
} else if (params.row.promotionStatus == "CLOSE") {
return h("div", [
h("Badge", {
props: {
status: "error",
text: "废弃",
},
}),
]);
}
},
},
],
goodsColumns: [ // 商品表单
{
title: "商品名称",
key: "goodsName",
minWidth: 120,
tooltip: true
},
{
title: "商品价格",
slot: "originalPrice",
width: 110,
},
{
title: "库存",
slot: "quantity",
minWidth: 30,
width: 90
},
{
title: "活动价格",
slot: "price",
width: 100,
},
{
title: "商家名称",
key: "storeName",
minWidth: 100,
tooltip: true
},
{
title: "活动场次",
width: 100,
slot: "time",
},
// {
// title: "状态",
// slot: "promotionApplyStatus",
// width: 90,
// },
{
title: "操作",
slot: "action",
width: 150,
align: "center",
},
],
goodsList: [], // 商品列表
params: { // 请求参数
seckillId: this.$route.query.id,
applyStatus: "PASS",
failReason: "",
ids: "",
},
rules: { // 验证规则
failReason: [{required: true, message: "请输入拒绝原因"}],
},
};
},
methods: {
// 初始化数据
init() {
this.getSeckillMsg();
},
// 分页 改变页码
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
// 分页 改变页数
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 清除选中状态
clearSelectAll() {
this.$refs.table.selectAll(false);
},
getDataList() {
// 获取商品详情
this.loading = true;
this.searchForm.seckillId = this.$route.query.id;
seckillGoodsList(this.searchForm).then((res) => {
this.loading = false;
if (res.success && res.result) {
this.goodsList = res.result.records;
this.total = res.result.total;
}
});
},
getSeckillMsg() {
// 获取活动详情
seckillDetail(this.$route.query.id).then((res) => {
if (res.success && res.result) {
this.data = [];
this.data.push(res.result);
this.promotionStatus = res.result.promotionStatus;
this.getDataList();
}
});
},
delGoods(index, row) {
// 删除商品
this.$Modal.confirm({
title: "确认删除",
content: "您确认要删除该商品吗?删除后不可恢复",
onOk: () => {
const params = {
seckillId: row.seckillId,
id: row.id
}
delSeckillGoods(params).then(res => {
if (res.success) {
this.goodsList.splice(index, 1);
this.$Message.success("删除成功！");
}
})
},
});
},
unixDate(time) {
// 处理报名截止时间
return this.$options.filters.unixToDate(new Date(time) / 1000);
},
unixHours(item) {
// 处理小时场次
let hourArr = item.split(",");
for (let i = 0; i < hourArr.length; i++) {
hourArr[i] += ":00";
}
return hourArr;
}
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
.operation {
margin: 10px 0;
}
.reason {
cursor: pointer;
color: #2d8cf0;
font-size: 12px;
}
</style>

150
manager/src/views/promotions/seckill/seckill-setup.vue Normal file
View File

@@ -0,0 +1,150 @@
<template>
<div v-if="templateShow">
<Form :model="form" :label-width="120">
<FormItem label="每日场次设置">
<Row :gutter="16" class="row">
<Col class="time-item" @click.native="handleClickTime(item,index)" v-for="(item,index) in this.times" :key="index" span="3">
<div class="time" :class="{'active':item.check}">{{item.time}}:00</div>
</Col>
</Row>
</FormItem>
<FormItem label="秒杀规则">
<Input type="textarea" :autosize="{minRows: 4,}" v-model="form.seckillRule" placeholder="申请规则" clearable style="width: 360px; margin-left:10px" />
</FormItem>
<FormItem>
<div class="foot-btn">
<Button @click="closeCurrentPage" style="margin-right: 5px">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
</div>
</FormItem>
</Form>
</div>
</template>
<script>
import { getSetting, setSetting } from "@/api/index";
export default {
data() {
return {
templateShow:false, // 设置是否显示
submitLoading: false,
times: [], //时间集合 1-24点
form: {
seckillRule: "",
},
};
},
mounted() {
/**
* 初始化
*/
this.init();
},
methods: {
/**
* 关闭当前页面
*/
closeCurrentPage() {
this.$store.commit("removeTag", "manager-seckill-add");
localStorage.pageOpenedList = JSON.stringify(
this.$store.state.app.pageOpenedList
);
this.$router.go(-1);
},
/**
* 提交秒杀信息
*/
async handleSubmit() {
let hours = this.times
.filter((item) => {
return item.check;
})
.map((item) => {
return item.time;
})
.join(",");
let result = await setSetting("SECKILL_SETTING", {
seckillRule: this.form.seckillRule,
hours,
});
if (result.success) {
this.$Message.success("设置成功!");
this.init();
}
},
/**
* 初始化当前信息
*/
async init() {
let result = await getSetting("SECKILL_SETTING");
if (result.success) {
this.templateShow = true
this.form.seckillRule = result.result.seckillRule;
this.times=[]
for (let i = 0; i < 24; i++) {
// 将数据拆出
if (result.result.hours) {
let way = result.result.hours.split(",");
way.forEach((hours) => {
if (hours == i) {
this.times.push({
time: i,
check: true,
});
}
});
}
if (!this.times[i]) {
this.times.push({
time: i,
check: false,
});
}
}
}
},
/**
* 选中时间
*/
handleClickTime(val, index) {
val.check = !val.check;
},
},
};
</script>
<style scoped lang="scss">
.row {
width: 50%;
}
.foot-btn {
margin-left: 10px;
}
.time-list {
display: flex;
flex-wrap: wrap;
}
.active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
color: #fff;
background: $theme_color !important;
}
.time {
width: 100%;
cursor: pointer;
transition: 0.35s;
border-radius: 0.8em;
justify-content: center;
align-items: center;
display: flex;
background: #f3f5f7;
height: 100%;
}
.time-item {
height: 50px;
margin: 8px 0;
font-size: 15px;
}
</style>

297
manager/src/views/promotions/seckill/seckill.vue Normal file
View File

@@ -0,0 +1,297 @@
<template>
<div class="seckill">
<Card>
<Row>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="70"
class="search-form"
>
<Form-item label="活动名称" prop="promotionName">
<Input
type="text"
v-model="searchForm.promotionName"
placeholder="请输入活动名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select
v-model="searchForm.promotionStatus"
placeholder="请选择"
clearable
style="width: 200px"
>
<Option value="NEW">未开始</Option>
<Option value="START">已开始/上架</Option>
<Option value="END">已结束/下架</Option>
<Option value="CLOSE">紧急关闭/作废</Option>
</Select>
</Form-item>
<Form-item label="活动时间">
<DatePicker
v-model="selectDate"
type="daterange"
clearable
placeholder="选择起始时间"
style="width: 200px"
>
</DatePicker>
</Form-item>
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
>搜索</Button
>
</Form>
</Row>
<Tabs value="list" class="mt_10" @on-click="clickTabPane">
<TabPane label="秒杀活动列表" name="list">
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
class="mt_10"
>
<template slot-scope="{ row }" slot="action">
<Button
type="info"
size="small"
class="mr_5"
v-if="row.promotionStatus == 'NEW'"
@click="edit(row)"
>编辑</Button
>
<Button type="info" size="small" class="mr_5" v-else @click="manage(row)"
>查看</Button
>
<Button
type="success"
size="small"
class="mr_5"
v-if="row.promotionStatus == 'NEW'"
@click="manage(row)"
>管理</Button
>
<Button
type="error"
size="small"
v-if="row.promotionStatus == 'START' || row.promotionStatus == 'NEW'"
class="mr_5"
@click="off(row)"
>下架</Button
>
&nbsp;
<Button
type="error"
size="small"
v-if="row.promotionStatus == 'CLOSE'"
ghost
@click="expire(row)"
>删除</Button
>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
<Page
style="margin: 20px 0"
:current="searchForm.pageNumber"
:total="total"
:page-size="searchForm.pageSize"
@on-change="changePage"
@on-page-size-change="changePageSize"
:page-size-opts="[10, 20, 50]"
size="small"
show-total
show-elevator
show-sizer
></Page>
</Row>
</TabPane>
<TabPane label="秒杀活动设置" name="setup">
<setupSeckill v-if="setupFlag"></setupSeckill>
</TabPane>
</Tabs>
</Card>
</div>
</template>
<script>
import { getSeckillList, delSeckill, updateSeckillStatus } from "@/api/promotion";
import setupSeckill from "@/views/promotions/seckill/seckill-setup";
import { promotionsStatusRender } from "@/utils/promotions";
export default {
name: "seckill",
components: {
setupSeckill,
},
data() {
return {
selectDate: [],
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "startTime",
order: "desc", // 默认排序方式
},
setupFlag: false, //默认不请求设置
columns: [
// 表单
{
title: "活动名称",
key: "promotionName",
minWidth: 130,
tooltip: true,
},
{
title: "开始时间",
key: "startTime",
width: 180,
},
{
title: "申请截止时间",
key: "applyEndTime",
width: 180,
},
{
title: "活动状态",
key: "promotionStatus",
width: 100,
render: (h, params) => {
return promotionsStatusRender(h, params);
},
},
{
title: "申请规则",
key: "seckillRule",
minWidth: 120,
tooltip: true,
},
{
title: "操作",
slot: "action",
align: "center",
width: 250,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
};
},
methods: {
// tab栏点击切换列表和设置
clickTabPane(name) {
if (name == "setup") {
this.setupFlag = true;
} else {
this.setupFlag = false;
}
},
// 初始化信息
init() {
this.getDataList();
},
// 分页 改变页码
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
// 分页 改变页数
changePageSize(v) {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
edit(v) {
// 编辑
this.$router.push({ name: "manager-seckill-add", query: { id: v.id } });
},
manage(v) {
// 管理
this.$router.push({ name: "seckill-goods", query: { id: v.id } });
},
off(v) {
// 下架
this.$Modal.confirm({
title: "提示",
content: "您确定要下架该活动吗？",
onOk: () => {
updateSeckillStatus(v.id).then((res) => {
if (res.success) {
this.$Message.success("下架成功");
this.getDataList();
}
});
},
});
},
expire(v) {
// 作废
this.$Modal.confirm({
title: "提示",
content: "您确定要作废该活动吗？",
onOk: () => {
delSeckill(v.id).then((res) => {
if (res.success) {
this.$Message.success("作废成功");
this.getDataList();
}
});
},
});
},
// 获取数据集合
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
this.searchForm.endTime = this.selectDate[1].getTime();
} else {
this.searchForm.startTime = null;
this.searchForm.endTime = null;
}
// 带多条件搜索参数获取表单数据
getSeckillList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss">
.mr_5 {
margin: 0 5px;
}
</style>