401 lines
11 KiB
Vue
Raw Normal View History

2021-06-15 18:09:57 +08:00
<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">
2021-12-11 13:50:58 +08:00
<Input
type="text"
v-model="form.promotionName"
placeholder="请填写活动名称"
clearable
style="width: 260px"
/>
2021-06-15 18:09:57 +08:00
</FormItem>
<FormItem label="活动时间">
2021-12-11 13:50:58 +08:00
<DatePicker
type="datetimerange"
:options="options"
v-model="rangeTime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择活动时间"
style="width: 260px"
>
2021-06-15 18:09:57 +08:00
</DatePicker>
</FormItem>
<FormItem label="优惠券活动类型" prop="couponActivityType">
2021-12-11 13:50:58 +08:00
<RadioGroup
type="button"
button-style="solid"
v-model="form.couponActivityType"
>
2021-06-15 18:09:57 +08:00
<Radio label="REGISTERED">新人发券</Radio>
<Radio label="SPECIFY">精确发券</Radio>
</RadioGroup>
</FormItem>
2021-12-11 13:50:58 +08:00
<FormItem
label="活动范围"
prop="activityScope"
v-if="form.couponActivityType === 'SPECIFY'"
>
2021-06-15 18:09:57 +08:00
<RadioGroup type="button" button-style="solid" v-model="form.activityScope">
<Radio label="ALL">全部会员</Radio>
<Radio label="DESIGNATED">指定会员</Radio>
</RadioGroup>
</FormItem>
2021-12-11 13:50:58 +08:00
<FormItem
label="选择会员"
prop="scopeType"
v-if="
form.couponActivityType === 'SPECIFY' &&
form.activityScope === 'DESIGNATED'
"
>
<Button type="primary" icon="ios-add" @click="addVip" ghost
>选择会员</Button
>
<div style="margin-top: 24px" v-if="form.activityScope == 'DESIGNATED'">
<Table border :columns="userColumns" :data="this.selectedMember"> </Table>
</div>
2021-06-15 18:09:57 +08:00
</FormItem>
</div>
<h4>配置优惠券</h4>
<div class="form-item-view">
<FormItem label="选择优惠券" prop="scopeType">
2021-12-11 13:50:58 +08:00
<Button type="primary" :loading="submitLoading" @click="showSelector"
>选择优惠券</Button
>
2021-06-15 18:09:57 +08:00
</FormItem>
<FormItem label="赠送配置" prop="scopeType">
<Table border :columns="columns" :data="this.selectCouponList">
<template slot="sendNum" slot-scope="scope">
2021-12-11 13:50:58 +08:00
<Input
type="text"
v-model="form.couponActivityItems[scope.index].num"
placeholder="赠送数量"
/>
<Input
type="text"
v-model="form.couponActivityItems[scope.index].couponId"
v-show="false"
/>
2021-06-15 18:09:57 +08:00
</template>
</Table>
</FormItem>
<div>
<Button type="text" @click="closeCurrentPage">返回</Button>
2021-12-11 13:50:58 +08:00
<Button type="primary" :loading="submitLoading" @click="handleSubmit"
>提交</Button
>
2021-06-15 18:09:57 +08:00
</div>
</div>
</div>
</Form>
</Card>
2021-12-11 13:50:58 +08:00
<Modal
@on-ok="
() => {
this.showCouponSelect = false;
}
"
@on-cancel="
() => {
this.showCouponSelect = false;
}
"
v-model="showCouponSelect"
width="80%"
>
<couponTemplate
:checked="true"
:selectedList="selectCouponList"
getType="ACTIVITY"
promotionStatus="START"
@selected="selectedCoupon"
/>
2021-06-15 18:09:57 +08:00
</Modal>
<Modal width="1200" v-model="checkUserList">
2021-12-11 13:50:58 +08:00
<userList
v-if="checkUserList"
@callback="callbackSelectUser"
:selectedList="selectedMember"
ref="memberLayout"
/>
2021-06-15 18:09:57 +08:00
</Modal>
</div>
</template>
<script>
2021-12-11 13:50:58 +08:00
import couponTemplate from "@/views/promotions/coupon/coupon";
2021-06-15 18:09:57 +08:00
import userList from "@/views/member/list/index";
2021-12-11 13:50:58 +08:00
import { saveActivityCoupon } from "@/api/promotion";
import { promotionsScopeTypeRender } from "@/utils/promotions";
2021-06-15 18:09:57 +08:00
export default {
2021-12-11 13:50:58 +08:00
name: "add-coupon-activity",
2021-06-15 18:09:57 +08:00
components: {
couponTemplate,
2021-12-11 13:50:58 +08:00
userList,
2021-06-15 18:09:57 +08:00
},
2021-12-11 13:50:58 +08:00
data() {
2021-06-15 18:09:57 +08:00
return {
2021-06-17 14:45:14 +08:00
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
},
showCouponSelect: false, //显示优惠券选择框
rangeTime: "", //时间区间
checkUserList: false, //会员选择器
selectedMember: [], //选择的会员
2021-06-15 18:09:57 +08:00
form: {
promotionName: "", //活动名称
2021-06-18 16:38:10 +08:00
activityScope: "ALL", //活动范围 ,默认全体发券
couponActivityType: "REGISTERED", //触发活动方式 默认新人赠券
startTime: "", //开始时间
endTime: "", //结束时间
2021-06-18 16:38:10 +08:00
memberDTOS: [], //指定会员范围
2021-12-11 13:50:58 +08:00
couponActivityItems: [], //优惠券列表
2021-06-18 16:38:10 +08:00
},
2021-06-15 18:09:57 +08:00
submitLoading: false, // 添加或编辑提交状态
selectCouponList: [], //选择的优惠券列表
2021-06-15 18:09:57 +08:00
formRule: {
2021-12-11 13:50:58 +08:00
promotionName: [{ required: true, message: "活动名称不能为空" }],
rangeTime: [{ required: true, message: "请选择活动有效期" }],
description: [{ required: true, message: "请输入范围描述" }],
2021-06-15 18:09:57 +08:00
},
// 用户表格
userColumns: [
{
title: "用户名称",
key: "nickName",
minWidth: 120,
},
{
title: "手机号",
key: "mobile",
render: (h, params) => {
return h("div", params.row.mobile || "暂未填写");
},
},
{
title: "最后登录时间",
key: "lastLoginDate",
},
{
title: "操作",
key: "action",
minWidth: 50,
align: "center",
render: (h, params) => {
return h(
"Button",
{
props: {
size: "small",
type: "error",
ghost: true,
},
on: {
click: () => {
this.delUser(params.index);
},
},
},
"删除"
);
},
},
],
//优惠券表格
2021-06-15 18:09:57 +08:00
columns: [
{
title: "优惠券名称",
key: "couponName",
minWidth: 120,
},
{
title: "品类描述",
key: "scopeType",
2021-12-11 13:50:58 +08:00
width: 120,
2021-06-15 18:09:57 +08:00
render: (h, params) => {
2021-12-11 13:50:58 +08:00
return promotionsScopeTypeRender(h, params);
2021-06-15 18:09:57 +08:00
},
},
{
title: "面额/折扣",
key: "couponName",
minWidth: 120,
render: (h, params) => {
if (params.row.price) {
2021-12-11 13:50:58 +08:00
return h("div", this.$options.filters.unitPrice(params.row.price, "¥"));
2021-06-15 18:09:57 +08:00
} else {
return h("div", params.row.couponDiscount + "折");
}
},
},
{
title: "赠送数量",
type: "template",
slot: "sendNum",
minWidth: 120,
},
{
title: "操作",
key: "action",
minWidth: 50,
align: "center",
render: (h, params) => {
return h(
"Button",
{
props: {
size: "small",
type: "error",
ghost: true,
},
on: {
click: () => {
this.delCoupon(params.index);
2021-06-15 18:09:57 +08:00
},
},
},
"删除"
);
},
},
],
};
},
methods: {
// 返回已选择的用户
callbackSelectUser(val) {
// 每次将返回的数据回调判断
let findUser = this.selectedMember.find((item) => {
2021-06-18 16:38:10 +08:00
return item.id === val.id;
});
// 如果没有则添加
if (!findUser) {
this.selectedMember.push(val);
} else {
// 有重复数据就删除
this.selectedMember.map((item, index) => {
2021-06-18 16:38:10 +08:00
if (item.id === findUser.id) {
this.selectedMember.splice(index, 1);
}
});
2021-06-15 18:09:57 +08:00
}
2021-06-18 16:38:10 +08:00
this.reSelectMember();
2021-06-15 18:09:57 +08:00
},
2021-06-18 16:38:10 +08:00
// 删除选择的会员
delUser(index) {
this.selectedMember.splice(index, 1);
this.reSelectMember();
2021-06-15 18:09:57 +08:00
},
2021-06-18 16:38:10 +08:00
//更新选择的会员
reSelectMember() {
this.form.memberDTOS = this.selectedMember.map((item) => {
return {
nickName: item.nickName,
2021-12-11 13:50:58 +08:00
id: item.id,
};
2021-06-18 16:38:10 +08:00
});
2021-06-15 18:09:57 +08:00
},
/**
* 返回优惠券*/
selectedCoupon(val) {
this.selectCouponList = val;
2021-06-18 16:38:10 +08:00
this.reSelectCoupon();
},
// 删除选择的优惠券
delCoupon(index) {
this.selectCouponList.splice(index, 1);
this.reSelectCoupon();
},
reSelectCoupon() {
2021-07-08 14:36:05 +08:00
// 清空原有数据
2021-06-18 16:38:10 +08:00
this.form.couponActivityItems = this.selectCouponList.map((item) => {
return {
2021-06-15 18:09:57 +08:00
num: 0,
couponId: item.id,
2021-12-11 13:50:58 +08:00
};
});
2021-06-15 18:09:57 +08:00
},
2021-06-18 16:38:10 +08:00
// 添加指定用户
addVip() {
this.checkUserList = true;
this.$nextTick(() => {
this.$refs.memberLayout.selectedMember = true;
2021-06-15 18:09:57 +08:00
});
},
2021-06-18 16:38:10 +08:00
//显示优惠券选择框
showSelector() {
this.showCouponSelect = true;
},
2021-06-15 18:09:57 +08:00
/** 保存平台优惠券 */
handleSubmit() {
2021-12-11 13:50:58 +08:00
this.form.startTime = this.$options.filters.unixToDate(this.rangeTime[0] / 1000);
this.form.endTime = this.$options.filters.unixToDate(this.rangeTime[1] / 1000);
2021-06-15 18:09:57 +08:00
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
this.submitLoading = true;
2021-06-18 16:38:10 +08:00
// 添加 避免编辑后传入id等数据 记得删除
delete params.id;
saveActivityCoupon(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("优惠券活动创建成功");
this.closeCurrentPage();
}
});
2021-06-15 18:09:57 +08:00
}
});
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "add-platform-coupon");
2021-12-11 13:50:58 +08:00
localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
2021-06-15 18:09:57 +08:00
this.$router.go(-1);
},
2021-06-15 18:09:57 +08:00
},
};
</script>
<style lang="scss" scpoed>
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;
}
.describe {
font-size: 12px;
margin-left: 10px;
color: #999;
}
.effectiveDays {
font-size: 12px;
color: #999;
> * {
margin: 0 4px;
}
}
</style>