355 lines
11 KiB
Vue
355 lines
11 KiB
Vue
|
<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="活动时间">
|
||
|
|
<DatePicker type="datetimerange" v-model="rangeTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择"
|
||
|
|
:options="options" style="width: 260px">
|
||
|
|
</DatePicker>
|
||
|
|
</FormItem>
|
||
|
|
|
||
|
|
<FormItem label="优惠券活动类型" prop="couponActivityType">
|
||
|
|
<RadioGroup type="button" button-style="solid" v-model="form.couponActivityType">
|
||
|
|
<Radio label="REGISTERED">新人发券</Radio>
|
||
|
|
<Radio label="SPECIFY">精确发券</Radio>
|
||
|
|
</RadioGroup>
|
||
|
|
</FormItem>
|
||
|
|
<FormItem label="活动范围" prop="activityScope" v-if="form.couponActivityType==='SPECIFY'">
|
||
|
|
<RadioGroup type="button" button-style="solid" v-model="form.activityScope">
|
||
|
|
<Radio label="ALL">全部会员</Radio>
|
||
|
|
<Radio label="DESIGNATED">指定会员</Radio>
|
||
|
|
</RadioGroup>
|
||
|
|
</FormItem>
|
||
|
|
<FormItem label="选择会员" prop="scopeType"
|
||
|
|
v-if="form.couponActivityType==='SPECIFY' && form.activityScope==='DESIGNATED'">
|
||
|
|
<Button type="primary" icon="ios-add" @click="addVip" ghost>选择会员</Button>
|
||
|
|
</FormItem>
|
||
|
|
{{ selectedMember }}
|
||
|
|
|
||
|
|
<FormItem label="活动描述" prop="activityScopeInfo">
|
||
|
|
<Input v-model="form.activityScopeInfo" type="textarea" :rows="4" maxlength="50" show-word-limit clearable
|
||
|
|
style="width: 260px"/>
|
||
|
|
</FormItem>
|
||
|
|
</div>
|
||
|
|
<h4>配置优惠券</h4>
|
||
|
|
<div class="form-item-view">
|
||
|
|
<FormItem label="选择优惠券" prop="scopeType">
|
||
|
|
<Button type="primary" :loading="submitLoading" @click="showSelector">选择优惠券</Button>
|
||
|
|
</FormItem>
|
||
|
|
<FormItem label="赠送配置" prop="scopeType">
|
||
|
|
|
||
|
|
<Table border :columns="columns" :data="this.selectCouponList">
|
||
|
|
<template slot="sendNum" slot-scope="scope">
|
||
|
|
<Input type="text" v-model="form.couponActivityItems[scope.index].num" placeholder="赠送数量"/>
|
||
|
|
<Input type="text" v-model="form.couponActivityItems[scope.index].couponId" v-show="false"/>
|
||
|
|
</template>
|
||
|
|
</Table>
|
||
|
|
</FormItem>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Button type="text" @click="closeCurrentPage">返回</Button>
|
||
|
|
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Form>
|
||
|
|
</Card>
|
||
|
|
<Modal v-model="showCouponSelect" width="80%">
|
||
|
|
<couponTemplate :checked="true" :selectList="selectCouponList" getType="ACTIVITY" @selected="selectedCoupon"/>
|
||
|
|
</Modal>
|
||
|
|
|
||
|
|
<Modal width="1200" v-model="checkUserList">
|
||
|
|
<userList @callback="callbackSelectUser" ref="memberLayout"/>
|
||
|
|
</Modal>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import couponTemplate from "@/views/promotion/coupon/coupon";
|
||
|
|
|
||
|
|
import userList from "@/views/member/list/index";
|
||
|
|
|
||
|
|
import {
|
||
|
|
saveActivityCoupon,
|
||
|
|
updateCouponActivity,
|
||
|
|
} from "@/api/promotion";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "addCouponActivity",
|
||
|
|
components: {
|
||
|
|
couponTemplate,
|
||
|
|
userList,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showCouponSelect: false,//显示优惠券选择框
|
||
|
|
modalType: 0, // 是否编辑
|
||
|
|
rangeTime: '',//时间区间
|
||
|
|
checkUserList: false,//会员选择器
|
||
|
|
selectedMember: [],//选择的会员
|
||
|
|
form: {
|
||
|
|
promotionName: '', //活动名称
|
||
|
|
activityScope: 'ALL', //活动范围
|
||
|
|
couponActivityType: 'REGISTERED', //触发活动方式
|
||
|
|
activityScopeInfo: '', //活动描述
|
||
|
|
startTime: '', //开始时间
|
||
|
|
endTime: '', //结束时间
|
||
|
|
couponActivityItems: []
|
||
|
|
|
||
|
|
}, // 表单
|
||
|
|
id: this.$route.query.id, // 优惠券活动id
|
||
|
|
submitLoading: false, // 添加或编辑提交状态
|
||
|
|
selectCouponList: [],//选择的优惠券列表
|
||
|
|
formRule: {
|
||
|
|
promotionName: [{required: true, message: "活动名称不能为空"}],
|
||
|
|
rangeTime: [{required: true, message: "请选择活动有效期"}],
|
||
|
|
description: [{required: true, message: "请输入范围描述"}],
|
||
|
|
},
|
||
|
|
//优惠券表哥
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
title: "优惠券名称",
|
||
|
|
key: "couponName",
|
||
|
|
minWidth: 120,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "品类描述",
|
||
|
|
key: "scopeType",
|
||
|
|
width: 100,
|
||
|
|
render: (h, params) => {
|
||
|
|
let text = "未知";
|
||
|
|
if (params.row.scopeType == "ALL") {
|
||
|
|
text = "全品类";
|
||
|
|
} else if (params.row.scopeType == "PORTION_GOODS_CATEGORY") {
|
||
|
|
text = "商品分类";
|
||
|
|
} else if (params.row.scopeType == "PORTION_SHOP_CATEGORY") {
|
||
|
|
text = "店铺分类";
|
||
|
|
} else if (params.row.scopeType == "PORTION_GOODS") {
|
||
|
|
text = "指定商品";
|
||
|
|
}
|
||
|
|
return h("div", [text]);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "面额/折扣",
|
||
|
|
key: "couponName",
|
||
|
|
minWidth: 120,
|
||
|
|
render: (h, params) => {
|
||
|
|
if (params.row.price) {
|
||
|
|
return h(
|
||
|
|
"div",
|
||
|
|
this.$options.filters.unitPrice(params.row.price, "￥")
|
||
|
|
);
|
||
|
|
} 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.delGoods(params.index);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
"删除"
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
// 如果id不为空则查询信息
|
||
|
|
if (this.id) {
|
||
|
|
this.getCoupon();
|
||
|
|
this.modalType = 1;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
// 返回已选择的用户
|
||
|
|
callbackSelectUser(val) {
|
||
|
|
let index = this.selectedMember.indexOf(val)
|
||
|
|
if (index > 0) {
|
||
|
|
this.selectedMember.remove(val);
|
||
|
|
}
|
||
|
|
this.selectedMember.push(val);
|
||
|
|
},
|
||
|
|
|
||
|
|
// 添加指定用户
|
||
|
|
addVip() {
|
||
|
|
this.checkUserList = true;
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.$refs.memberLayout.selectedMember = true;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//显示优惠券选择框
|
||
|
|
showSelector() {
|
||
|
|
this.showCouponSelect = true;
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 返回优惠券*/
|
||
|
|
selectedCoupon(val) {
|
||
|
|
this.selectCouponList = val
|
||
|
|
//清空原有数据
|
||
|
|
this.form.couponActivityItems = [];
|
||
|
|
val.forEach((item, index) => {
|
||
|
|
|
||
|
|
this.form.couponActivityItems.push({
|
||
|
|
num: 0,
|
||
|
|
couponId: item.id
|
||
|
|
})
|
||
|
|
})
|
||
|
|
console.log(val)
|
||
|
|
},
|
||
|
|
|
||
|
|
getCoupon() {
|
||
|
|
/**
|
||
|
|
* 获取优惠券活动详情
|
||
|
|
*/
|
||
|
|
getPlatformCoupon(this.id).then((res) => {
|
||
|
|
let data = res.result;
|
||
|
|
if (!data.promotionGoodsList) data.promotionGoodsList = [];
|
||
|
|
if (data.scopeType == "PORTION_GOODS_CATEGORY") {
|
||
|
|
let prevCascader = data.scopeId.split(",");
|
||
|
|
|
||
|
|
// console.log(prevCascader);
|
||
|
|
function next(params, prev) {
|
||
|
|
for (let i = 0; i < params.length; i++) {
|
||
|
|
const item = params[i];
|
||
|
|
console.log(item);
|
||
|
|
if (item.children) {
|
||
|
|
next(item.children, [...prev, item]);
|
||
|
|
} else {
|
||
|
|
if (prevCascader.includes(item.id)) {
|
||
|
|
prevCascader = prevCascader.map((key) => {
|
||
|
|
if (key === item.id) {
|
||
|
|
let result = prev.map((item) => item.id);
|
||
|
|
|
||
|
|
return [...result, item.id];
|
||
|
|
} else {
|
||
|
|
return key;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
i === params.length - 1 && (prev = []);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
next(this.goodsCategoryList, []);
|
||
|
|
data.scopeIdGoods = prevCascader;
|
||
|
|
}
|
||
|
|
data.rangeTime = [];
|
||
|
|
data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
|
||
|
|
this.form = data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
/** 保存平台优惠券 */
|
||
|
|
handleSubmit() {
|
||
|
|
|
||
|
|
this.form.startTime = this.$options.filters.unixToDate(
|
||
|
|
this.rangeTime[0] / 1000
|
||
|
|
);
|
||
|
|
this.form.endTime = this.$options.filters.unixToDate(
|
||
|
|
this.rangeTime[1] / 1000
|
||
|
|
);
|
||
|
|
|
||
|
|
this.$refs.form.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
const params = JSON.parse(JSON.stringify(this.form));
|
||
|
|
console.log(params)
|
||
|
|
this.submitLoading = true;
|
||
|
|
if (this.modalType === 0) {
|
||
|
|
// 添加 避免编辑后传入id等数据 记得删除
|
||
|
|
delete params.id;
|
||
|
|
saveActivityCoupon(params).then((res) => {
|
||
|
|
this.submitLoading = false;
|
||
|
|
if (res.success) {
|
||
|
|
this.$Message.success("优惠券活动创建成功");
|
||
|
|
this.closeCurrentPage();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
updateCouponActivity(params).then((res) => {
|
||
|
|
this.submitLoading = false;
|
||
|
|
if (res.success) {
|
||
|
|
this.$Message.success("优惠券活动修改成功");
|
||
|
|
this.closeCurrentPage();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 关闭当前页面
|
||
|
|
closeCurrentPage() {
|
||
|
|
this.$store.commit("removeTag", "add-platform-coupon");
|
||
|
|
localStorage.pageOpenedList = JSON.stringify(
|
||
|
|
this.$store.state.app.pageOpenedList
|
||
|
|
);
|
||
|
|
this.$router.go(-1);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</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>
|
||
|
|
|