zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

券活动完善

master
Chopper 2021-06-18 16:38:10 +08:00
parent 76d09c0559
commit b3fda14322
8 changed files with 180 additions and 879 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
manager/src/api/promotion.js
View File

@ -119,8 +119,8 @@ export const getCouponActivityList = params => {
return getRequest("/promotion/couponActivity", params);
};
// 作废优惠券
export const deleteCouponActivity = ids => {
return deleteRequest(`/promotion/couponActivity/${ids}`);
export const closeActivity = id => {
return deleteRequest(`/promotion/couponActivity/${id}`);
};
// 更新优惠券活动
export const updateCouponActivity = params => {

8
manager/src/router/router.js
View File

@ -251,10 +251,16 @@ export const otherRouter = {
},
{
path: "coupon-activity/edit",
title: "编辑平台优惠券",
title: "编辑平台优惠券活动",
name: "edit-coupon-activity",
component: () => import("@/views/promotion/couponActivity/couponPublish.vue")
},
{
path: "promotion/coupon-activity-info",
title: "券活动详情",
name: "coupon-activity-info",
component: () => import("@/views/promotion/couponActivity/couponInfo.vue")
},
{
path: "promotion/member-receive-coupon",
title: "领取详情",

173
manager/src/views/promotion/couponActivity/coupon.vue
View File

@ -4,8 +4,17 @@
<Row class="operation padding-row">
<Button @click="add" type="primary">添加活动</Button>
</Row>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"
@on-sort-change="changeSort" @on-selection-change="changeSelect">
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
<template slot-scope="{ row,index }" slot="action">
<Button type="primary"
size="small" style="margin-right: 10px" @click="info(row)">查看
</Button>
<Button v-if="!checked && row.promotionStatus === 'START' || row.promotionStatus === 'NEW'" type="error"
size="small" style="margin-right: 10px" @click="remove(row)">停止
</Button>
</template>
</Table>
<Row type="flex" justify="end" class="page">
<Page :current="searchForm.pageNumber + 1" :total="total" :page-size="searchForm.pageSize"
@ -19,11 +28,11 @@
<script>
import {
getCouponActivityList,
updatePlatformCouponStatus,
closeActivity,
} from "@/api/promotion";
export default {
name: "coupon",
name: "couponActivity",
components: {},
data() {
return {
@ -148,63 +157,36 @@ export default {
default: false,
},
},
watch: {
$route(to, from) {
if (to.fullPath == "/promotion/manager-coupon") {
this.init();
}
},
},
methods: {
// 选中优惠券 父级传值
check(val, index) {
this.data[index].___selected = !this.data[index].___selected
this.$emit("selected", val);
},
//获取数据 初始化
init() {
this.getDataList();
},
//增加券活动
add() {
this.$router.push({name: "add-coupon-activity"});
},
/** 跳转至领取详情页面 */
receiveInfo(v) {
this.$router.push({name: "member-receive-coupon", query: {id: v.id}});
},
//查看详情
info(v) {
this.$router.push({name: "platform-coupon-info", query: {id: v.id}});
this.$router.push({name: "coupon-activity-info", query: {id: v.id}});
},
//跳转页面
changePage(v) {
this.searchForm.pageNumber = v - 1;
this.getDataList();
this.clearSelectAll();
},
//修改分页
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
//搜索活动
handleSearch() {
this.searchForm.pageNumber = 0;
this.searchForm.pageSize = 10;
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
},
//数据获取
getDataList() {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
@ -218,137 +200,36 @@ export default {
getCouponActivityList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
res.result.records.forEach(item => {
item.___selected = false
})
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
this.submitLoading = true;
if (this.modalType === 0) {
// 添加 避免编辑后传入id等数据 记得删除
delete this.form.id;
this.postRequest("/coupon/insertOrUpdate", this.form).then(
(res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
}
);
} else {
// 编辑
this.postRequest("/coupon/insertOrUpdate", this.form).then(
(res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("操作成功");
this.getDataList();
this.modalVisible = false;
}
}
);
}
}
});
},
//跳转编辑
edit(v) {
this.$router.push({name: "edit-platform-coupon", query: {id: v.id}});
},
//下架活动
remove(v) {
this.$Modal.confirm({
title: "确认下架",
// 记得确认修改此处
content: "确认要下架此优惠券么?",
content: "确认要下架此优惠券活动么?下架活动只能重新创建",
loading: true,
onOk: () => {
// 删除
updatePlatformCouponStatus({
couponIds: v.id,
promotionStatus: "CLOSE",
})
.then((res) => {
this.$Modal.remove();
closeActivity(v.id).then((res) => {
if (res.success) {
this.$Message.success("优惠券已作废");
this.$Message.success("优惠券活动已作废");
this.getDataList();
}
})
.catch(() => {
}).catch(() => {
this.$Modal;
});
},
});
},
delAll() {
if (this.selectCount <= 0) {
this.$Message.warning("您还未选择要下架的优惠券");
return;
}
this.$Modal.confirm({
title: "确认下架",
content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
loading: true,
onOk: () => {
let ids = [];
this.selectList.forEach(function (e) {
ids.push(e.id);
});
let params = {
couponIds: ids.toString(),
promotionStatus: "CLOSE",
};
// 批量删除
updatePlatformCouponStatus(params).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("下架成功");
this.clearSelectAll();
this.getDataList();
}
});
},
});
},
upAll() {
if (this.selectCount <= 0) {
this.$Message.warning("请选择要上架的优惠券");
return;
}
this.$Modal.confirm({
title: "确认上架",
content: "您确认要上架所选的 " + this.selectCount + " 条数据?",
loading: true,
onOk: () => {
let ids = [];
this.selectList.forEach(function (e) {
ids.push(e.id);
});
let params = {
couponIds: ids.toString(),
promotionStatus: "START",
};
// 批量上架
updatePlatformCouponStatus(params).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("上架成功");
this.clearSelectAll();
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();

261
manager/src/views/promotion/couponActivity/couponInfo.vue
View File

@ -3,81 +3,37 @@
<div class="content-goods-publish">
<Form ref="form" :model="form" :label-width="130">
<div class="base-info-item">
<h4>平台券活动详情</h4>
<h4>优惠券活动详情</h4>
<div class="form-item-view">
<FormItem label="活动名称">
<span class="goods-category-name">{{ form.promotionName }}</span>
<span>{{ couponActivity.promotionName }}</span>
</FormItem>
<FormItem label="活动类型">
<span class="goods-category-name">{{
getCouponType(form.couponType)
}}</span>
<span v-if="couponActivity.couponActivityType === 'REGISTERED'" >新人发券</span>
<spin v-else>精确发券</spin>
</FormItem>
<FormItem label="面额">
<span class="goods-category-name"> ￥{{ form.price | unitPrice }}</span>
<FormItem label="活动范围" v-if="couponActivity.couponActivityType === 'SPECIFY'" >
<span v-if="couponActivity.activityScope === 'ALL'" >全部会员</span>
<spin v-else>指定会员</spin>
</FormItem>
<FormItem label="活动说明">
<span class="goods-category-name">{{ form.description }}</span>
<FormItem label="活动时间">
<span>{{ couponActivity.startTime }}～{{ couponActivity.endTime }}</span>
</FormItem>
<FormItem label="发放总数">
<span class="goods-category-name">{{ form.publishNum }}</span>
</FormItem>
<FormItem label="领取限制">
<span class="goods-category-name">{{ form.limitNum }}</span>
</FormItem>
<FormItem label="活动开始时间">
<span class="goods-category-name">{{ form.startTime }}</span>
</FormItem>
<FormItem label="消费限额">
<span class="goods-category-name">{{
form.consumptionLimit
}}</span>
</FormItem>
<FormItem label="使用有效期">
<span class="goods-category-name">{{ form.startTime }} 至 {{ form.endTime }}</span>
</FormItem>
<FormItem label="适用品类范围">
<span class="goods-category-name">{{
getScopeType(form.scopeType)
}}</span>
</FormItem>
<FormItem label="品类范围描述">
<span class="goods-category-name">{{ form.couponName }}</span>
</FormItem>
<FormItem label="状态">
<span class="goods-category-name">{{
getStatus(form.status)
}}</span>
</FormItem>
<FormItem label="优惠券类型">
<span class="goods-category-name">{{
getType(form.getType)
}}</span>
</FormItem>
<FormItem label="活动创建时间">
<span class="goods-category-name">{{ form.createTime }}</span>
</FormItem>
<FormItem label="活动最后更新时间">
<span class="goods-category-name">{{ form.updateTime }}</span>
</FormItem>
<FormItem label="更新管理员名称">
<span class="goods-category-name">{{ form.updateBy }}</span>
</FormItem>
<FormItem label="已发放数量">
<span class="goods-category-name">{{ form.receivedNum }}</span>
</FormItem>
<FormItem label="已使用数量">
<span class="goods-category-name">{{ form.usedNum }}</span>
<FormItem label="活动状态">
<span v-if="couponActivity.promotionStatus==='NEW'">新建</span>
<span v-if="couponActivity.promotionStatus==='START'">已开始</span>
<span v-if="couponActivity.promotionStatus==='END'">已结束</span>
<span v-if="couponActivity.promotionStatus==='CLOSE'">已废弃</span>
</FormItem>
</div>
<h4>适用品类范围</h4>
<div>
<Table :loading="loading" border :columns="columns1" :data="data1" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
<Row type="flex" justify="end" class="page">
<Page :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>
</div>
<h4>优惠券列表</h4>
<Table :columns="couponColumn" :data="couponData" ref="table">
</Table>
<h4 v-if="couponActivity.activityScopeInfo && memberData.length>0">会员列表列表</h4>
<Table :columns="memberColumn" :data="memberData">
</Table>
</div>
</Form>
</div>
@ -89,145 +45,78 @@
</template>
<script>
import { getPlatformCoupon } from "@/api/promotion";
import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
import editor from "@/views/my-components/lili/editor";
import {getCouponActivity} from "@/api/promotion";
export default {
name: "addCoupon",
components: {
uploadPicThumb,
editor,
},
name: "couponActivityInfo",
data() {
return {
modalType: 0, // 当前类型
loading: false, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
},
form: {
/** 店铺承担比例 */
sellerCommission: 0,
/** 发行数量 */
publishNum: 1,
/** 运费承担者 */
scopeType: "ALL",
/** 消费限额 */
consumptionLimit: "",
/** 限领数量 */
limitNum: 1,
/** 活动类型 */
couponType: "",
/** 优惠券名称 */
couponName: "",
/** 已被使用数量 */
usedNum: 0,
/** 已被领取的数量 */
receivedNum: 0,
},
id: this.$route.query.id,
columns1: [
id: this.$route.query.id,//表单id
couponActivity: "",//券活动
couponColumn: [
{
title: "一级类目",
key: "name",
title: "优惠券名称",
key: 'couponName'
},
{
title: "二级类目",
key: "age",
title: "优惠券金额",
key: 'price',
render: (h, params) => {
let text = "未知";
if (params.row.couponType === "DISCOUNT") {
text = params.row.price + "折";
} else if (params.row.couponType === "PRICE") {
text = "¥" + params.row.price;
}
return h("div", [text]);
},
},
{
title: "三级类目",
key: "address",
title: "优惠券类型",
key: 'couponType',
render: (h, params) => {
let text = "未知";
if (params.row.couponType == "DISCOUNT") {
text = "打折";
} else if (params.row.couponType == "PRICE") {
text = "减免现金";
}
return h("div", [text]);
},
},
{
title: "赠送数量",
key: "num",
}
],
couponData: [],
memberColumn: [
{
title: "会员id",
key: "id",
},
{
title: "昵称",
key: "nickName",
},
],
data1: [
{
name: "王小明",
age: 18,
address: "北京市朝阳区芍药居",
},
{
name: "张小刚",
age: 25,
address: "北京市海淀区西二旗",
},
{
name: "李小红",
age: 30,
address: "上海市浦东新区世纪大道",
},
{
name: "周小伟",
age: 26,
address: "深圳市南山区深南大道",
},
],
submitLoading: false, // 添加或编辑提交状态
memberData: [],
};
},
mounted() {
// 如果id不为空则查询信息
if (this.id) {
this.getCoupon();
this.modalType = 1;
}
this.getCouponActivity();
},
methods: {
getCouponType(value) {
switch (value) {
case "POINT":
return "打折";
case "PRICE":
return "减免现金";
}
},
/** 获取状态 */
getStatus(value) {
switch (value) {
case "NEW":
return "新建";
case "START":
return "开始";
case "LOWER":
return "结束";
case "CANCEL":
return "作废";
}
},
/** 关联范围类型 */
getScopeType(value) {
switch (value) {
case "PORTION_CATEGORY":
return "部分商品分类";
case "PORTION_GOODS":
return "指定商品";
case "ALL":
return "全品类";
}
},
/** 优惠券类型 */
getType(value) {
switch (value) {
case "FREE":
return "免费获取";
case "ACTIVITY":
return "活动获取";
}
},
getCoupon() {
getPlatformCoupon(this.id).then((res) => {
this.form = res.result;
//获取优惠券活动
getCouponActivity() {
getCouponActivity(this.id).then((res) => {
this.couponActivity = res.result;
this.couponData = this.couponActivity.couponActivityItems;
this.memberData = JSON.parse(this.couponActivity.activityScopeInfo);
});
},
back() {
this.$store.commit("removeTag", "platform-coupon-info");
this.$store.commit("removeTag", "coupon-activity");
this.$router.go(-1);
},
},

4
manager/src/views/promotion/couponActivity/couponPublish.scss
View File

@ -123,10 +123,6 @@ div.base-info-item {
}
/** 审核信息-拒绝原因 */
.auth-info {
color: red;
}
.el-form-item {
width: 30%;

167
manager/src/views/promotion/couponActivity/couponPublish.vue
View File

@ -6,11 +6,12 @@
<h4>活动信息</h4>
<div class="form-item-view">
<FormItem label="活动名称" prop="promotionName">
<Input type="text" v-model="form.promotionName" placeholder="活动名称" clearable style="width: 260px" />
<Input type="text" v-model="form.promotionName" placeholder="活动名称" clearable style="width: 260px"/>
</FormItem>
<FormItem label="活动时间">
<DatePicker type="datetimerange" :options="options" v-model="rangeTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" style="width: 260px">
<DatePicker type="datetimerange" :options="options" v-model="rangeTime" format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择" style="width: 260px">
</DatePicker>
</FormItem>
@ -26,17 +27,14 @@
<Radio label="DESIGNATED">指定会员</Radio>
</RadioGroup>
</FormItem>
<FormItem label="选择会员" prop="scopeType" v-if="form.couponActivityType==='SPECIFY' && form.activityScope==='DESIGNATED'">
<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>
</FormItem>
<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">
@ -47,8 +45,8 @@
<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" />
<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>
@ -61,12 +59,13 @@
</div>
</Form>
</Card>
<Modal @on-ok="()=>{this.showCouponSelect = false}" @on-cancel="()=>{this.showCouponSelect = false}" v-model="showCouponSelect" width="80%">
<couponTemplate :checked="true" :selectedList="selectCouponList" getType="ACTIVITY" @selected="selectedCoupon" />
<Modal @on-ok="()=>{this.showCouponSelect = false}" @on-cancel="()=>{this.showCouponSelect = false}"
v-model="showCouponSelect" width="80%">
<couponTemplate :checked="true" :selectedList="selectCouponList" getType="ACTIVITY" @selected="selectedCoupon"/>
</Modal>
<Modal width="1200" v-model="checkUserList">
<userList v-if="checkUserList" @callback="callbackSelectUser" :selectedList="selectedMember" ref="memberLayout" />
<userList v-if="checkUserList" @callback="callbackSelectUser" :selectedList="selectedMember" ref="memberLayout"/>
</Modal>
</div>
</template>
@ -76,7 +75,7 @@ import couponTemplate from "@/views/promotion/coupon/coupon";
import userList from "@/views/member/list/index";
import { saveActivityCoupon, updateCouponActivity } from "@/api/promotion";
import {saveActivityCoupon, updateCouponActivity} from "@/api/promotion";
export default {
name: "addCouponActivity",
@ -92,26 +91,24 @@ export default {
},
},
showCouponSelect: false, //显示优惠券选择框
modalType: 0, // 是否编辑
rangeTime: "", //时间区间
checkUserList: false, //会员选择器
selectedMember: [], //选择的会员
form: {
promotionName: "", //活动名称
activityScope: "ALL", //活动范围
couponActivityType: "REGISTERED", //触发活动方式
activityScopeInfo: "", //活动描述
activityScope: "ALL", //活动范围 ，默认全体发券
couponActivityType: "REGISTERED", //触发活动方式 默认新人赠券
startTime: "", //开始时间
endTime: "", //结束时间
couponActivityItems: [],
}, // 表单
id: this.$route.query.id, // 优惠券活动id
memberDTOS: [], //指定会员范围
couponActivityItems: [],//优惠券列表
},
submitLoading: false, // 添加或编辑提交状态
selectCouponList: [], //选择的优惠券列表
formRule: {
promotionName: [{ required: true, message: "活动名称不能为空" }],
rangeTime: [{ required: true, message: "请选择活动有效期" }],
description: [{ required: true, message: "请输入范围描述" }],
promotionName: [{required: true, message: "活动名称不能为空"}],
rangeTime: [{required: true, message: "请选择活动有效期"}],
description: [{required: true, message: "请输入范围描述"}],
},
// 用户表格
userColumns: [
@ -230,28 +227,13 @@ export default {
],
};
},
async mounted() {
// 如果id不为空则查询信息
if (this.id) {
this.getCoupon();
this.modalType = 1;
}
},
methods: {
// 删除选择的优惠券
delUser(index) {
this.selectedMember.splice(index, 1);
},
// 删除选择的优惠券
delCoupon(index) {
this.selectCouponList.splice(index, 1);
},
// 返回已选择的用户
callbackSelectUser(val) {
// 每次将返回的数据回调判断
let findUser = this.selectedMember.find((item) => {
return item.id == val.id;
return item.id === val.id;
});
// 如果没有则添加
if (!findUser) {
@ -259,11 +241,48 @@ export default {
} else {
// 有重复数据就删除
this.selectedMember.map((item, index) => {
if (item.id == findUser.id) {
if (item.id === findUser.id) {
this.selectedMember.splice(index, 1);
}
});
}
this.reSelectMember();
},
// 删除选择的会员
delUser(index) {
this.selectedMember.splice(index, 1);
this.reSelectMember();
},
//更新选择的会员
reSelectMember() {
this.form.memberDTOS = this.selectedMember.map((item) => {
return {
nickName: item.nickName,
id: item.id
}
});
},
/**
* 返回优惠券*/
selectedCoupon(val) {
this.selectCouponList = val;
this.reSelectCoupon();
},
// 删除选择的优惠券
delCoupon(index) {
this.selectCouponList.splice(index, 1);
this.reSelectCoupon();
},
reSelectCoupon() {
//清空原有数据
this.form.couponActivityItems = this.selectCouponList.map((item) => {
return {
num: 0,
couponId: item.id,
}
});
console.log(this.form.couponActivityItems)
},
// 添加指定用户
@ -277,64 +296,6 @@ export default {
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(
@ -349,7 +310,6 @@ export default {
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) => {
@ -359,15 +319,6 @@ export default {
this.closeCurrentPage();
}
});
} else {
updateCouponActivity(params).then((res) => {
this.submitLoading = false;
if (res.success) {
this.$Message.success("优惠券活动修改成功");
this.closeCurrentPage();
}
});
}
}
});
},

172
manager/src/views/promotion/couponActivity/couponSpecify.vue
View File

@ -1,172 +0,0 @@
<template>
<div>
<Card>
<Form ref="form" :model="form" :label-width="120">
<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="vipType">
<RadioGroup v-model="vipType">
<Radio :label="0">全平台客户</Radio>
<Radio :label="1">指定客户</Radio>
</RadioGroup>
<Button type="primary" v-if="vipType==1" icon="ios-add" @click="addVip" ghost>添加客户</Button>
</FormItem>
<FormItem label="发放时间" prop="couponDiscount">
<DatePicker type="datetime" v-model="form.rangeTime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 260px">
</DatePicker>
</FormItem>
<FormItem label="选择优惠券" prop="couponType">
<Button type="primary" icon="ios-add" @click="checkCoupon=!checkCoupon" ghost>选择优惠券</Button>
<Table class="table" :columns="couponColumns" :data="couponData"></Table>
</FormItem>
</div>
<div style="margin-left:100px">
<Button type="text" @click="closeCurrentPage">返回</Button>
<Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
</div>
</div>
</Form>
<Modal width="1200" v-model="checkCoupon">
<couponList checked @selected="callbackSelectCoupon" />
</Modal>
<Modal width="1200" v-model="checkUserList">
<userList @selected="callbackSelectUser" ref="memberLayout" />
</Modal>
</Card>
</div>
</template>
<script>
import { addCouponActivity } from "@/api/promotion";
import couponList from "./coupon";
import userList from "@/views/member/list/index";
// import userList from ''
export default {
components: {
couponList,
userList,
},
data() {
return {
// 选择优惠券
checkCoupon: false,
// 选择用户
checkUserList: false,
// 优惠券表格title
couponColumns: [
{
title: "优惠券名称",
key: "name",
},
{
title: "有效期",
key: "age",
},
{
title: "优惠券数量",
key: "address",
},
{
title: "操作",
key: "action",
},
],
// datpicker时间设置
options: {
disabledDate(date) {
return date && date.valueOf() < Date.now() - 86400000;
},
},
//
vipType: 0, //客户会员类型 0全平台客户 1指定客户
form: {},
formRule: {},
id: this.$route.query.id, // 优惠券id
callbackCoupon: [],
};
},
mounted() {},
methods: {
// 添加指定用户
addVip() {
this.checkUserList = true;
this.$nextTick(() => {
this.$refs.memberLayout.selectedMember = true;
});
},
// 返回已选择的用户
callbackSelectUser(val){
console.log(val)
},
// 返回已选择的优惠券
callbackSelectCoupon(val) {
if (val.___selected) {
this.callbackCoupon.forEach((item, index) => {
if (item.id == val.id) this.callbackCoupon.splice(index, 1);
});
} else {
this.callbackCoupon.push(val);
}
},
// 关闭当前页面
closeCurrentPage() {
this.$store.commit("removeTag", "add-coupon-specify");
localStorage.pageOpenedList = JSON.stringify(
this.$store.state.app.pageOpenedList
);
this.$router.go(-1);
},
async handleSubmit() {
let res = await addCouponActivity();
},
},
};
</script>
<style lang="scss" scpoed>
.table {
width: 800px;
margin: 20px 0;
}
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;
}
.form-item-view {
margin: 20px 0;
}
.describe {
font-size: 12px;
margin-left: 10px;
color: #999;
}
.effectiveDays {
font-size: 12px;
color: #999;
> * {
margin: 0 4px;
}
}
</style>

250
manager/src/views/promotion/couponActivity/memberReceiveCoupon.vue
View File

@ -1,250 +0,0 @@
<template>
<div class="search">
<Card>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
sortable="custom"
@on-sort-change="changeSort"
@on-selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="rangeTime">
<div>{{ row.startTime }} ~ {{ row.endTime }}</div>
</template>
<template slot-scope="{ row }" slot="action">
<Button
type="error"
ghost
size="small"
:disabled="row.memberCouponStatus != 'NEW'"
@click="remove(row)"
>作废</Button
>
</template>
</Table>
<Row type="flex" justify="end" class="page">
<Page
: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>
</Card>
</div>
</template>
<script>
import {
getMemberReceiveCouponList,
deleteMemberReceiveCoupon,
} from "@/api/promotion";
export default {
name: "memberReceiveCoupon",
components: {},
data() {
return {
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "createTime", // 默认排序字段
order: "desc", // 默认排序方式
},
id: this.$route.query.id, // 优惠券id
submitLoading: false, // 添加或编辑提交状态
selectList: [], // 多选数据
columns: [
// 表头
{
title: "优惠券编号",
key: "couponId",
minWidth: 120,
},
{
title: "面额",
key: "price",
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.price, "￥")
);
},
},
{
title: "消费门槛",
key: "consumeThreshold",
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.consumeThreshold, "￥")
);
},
},
{
title: "有效期",
slot: "rangeTime",
minWidth: 120
},
{
title: "会员名称",
key: "memberName",
minWidth: 120
},
{
title: "适用范围",
key: "couponType",
minWidth: 50,
render: (h, params) => {
let text = "未知";
if (params.row.scopeType == "ALL") {
text = "全品类";
} else if (params.row.scopeType == "PORTION_CATEGORY") {
text = "部分商品分类";
} else if (params.row.scopeType == "PORTION_GOODS") {
text = "指定商品";
}
return h("div", [text]);
},
},
{
title: "会员名称",
key: "memberName",
},
{
title: "状态",
key: "memberCouponStatus",
minWidth: 50,
render: (h, params) => {
let text = "未知",
color = "";
if (params.row.memberCouponStatus == "NEW") {
text = "未使用";
color = "default";
} else if (params.row.memberCouponStatus == "USED") {
text = "已使用";
color = "green";
} else if (params.row.memberCouponStatus == "EXPIRE") {
text = "已过期";
color = "red";
} else if (params.row.memberCouponStatus == "CLOSED") {
text = "已作废";
color = "red";
}
return h("div", [
h(
"Tag",
{
props: {
color: color,
},
},
text
),
]);
},
},
{
title: "操作",
slot: "action",
align: "center",
width: 100,
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
};
},
methods: {
init() {
this.getDataList();
},
changePage(v) {
this.searchForm.pageNumber = v;
this.getDataList();
this.clearSelectAll();
},
changePageSize(v) {
this.searchForm.pageSize = v;
this.getDataList();
},
handleSearch() {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
handleReset() {
this.$refs.searchForm.resetFields();
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
// 重新加载数据
this.getDataList();
},
changeSort(e) {
this.searchForm.sort = e.key;
this.searchForm.order = e.order;
if (e.order === "normal") {
this.searchForm.order = "";
}
this.getDataList();
},
clearSelectAll() {
this.$refs.table.selectAll(false);
},
changeSelect(e) {
this.selectList = e;
},
/** 查询单个优惠券领取详情 */
getDataList() {
this.loading = true;
// 带多条件搜索参数获取表单数据 请自行修改接口
getMemberReceiveCouponList(this.id).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
/** 作废优惠券 */
remove(v) {
this.$Modal.confirm({
title: "确认作废",
content: "您确认要作废此优惠券?",
loading: true,
onOk: () => {
// 删除
deleteMemberReceiveCoupon(v.id).then((res) => {
this.$Modal.remove();
if (res.success) {
this.$Message.success("作废成功");
this.getDataList();
}
});
},
});
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss">
@import "@/styles/table-common.scss";
</style>