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

feat: 增加优惠券领取详情和优化pc端跳转使用优惠券页面

master
paulGao 2023-01-11 11:28:28 +08:00
parent c8649caf1a
commit db33b34f18
13 changed files with 1004 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
buyer/src/pages/CouponCenter.vue
View File

@ -5,25 +5,44 @@
<div>
<div class="coupon-title">
<router-link to="/">
<img src="../assets/images/logo.png" width="120" alt="">
<img src="../assets/images/logo.png" width="120" alt="" />
</router-link>
<p>领券中心</p>
<Input search style="width:400px" @on-search='search' enter-button="搜索" placeholder="搜索优惠券" />
<Input
search
style="width: 400px"
@on-search="search"
enter-button="搜索"
placeholder="搜索优惠券"
/>
</div>
<div class="fontsize_18 recommend">推荐好券</div>
<empty v-if="list.length===0" />
<empty v-if="list.length === 0" />
<ul class="coupon-list" v-else>
<li v-for="(item, index) in list" class="coupon-item" :key="index">
<div class="c-left">
<div>
<span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{item.price | unitPrice}}</span></span>
<span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.couponDiscount}}</span>折</span>
<span class="describe">满{{item.consumeThreshold}}元可用</span>
<span
v-if="item.couponType === 'PRICE'"
class="fontsize_12 global_color"
>￥<span class="price">{{
item.price | unitPrice
}}</span></span
>
<span
v-if="item.couponType === 'DISCOUNT'"
class="fontsize_12 global_color"
><span class="price">{{ item.couponDiscount }}</span
>折</span
>
<span class="describe"
>满{{ item.consumeThreshold }}元可用</span
>
</div>
<p>使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
<p>有效期：{{item.endTime}}</p>
<p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
<p>有效期：{{ item.endTime }}</p>
</div>
<b></b>
<a class="c-right" @click="receive(item)">立即领取</a>
@ -31,12 +50,15 @@
<i class="circle-bottom"></i>
</li>
</ul>
<Page :total="total" @on-change="changePageNum"
<Page
:total="total"
@on-change="changePageNum"
class="pageration"
@on-page-size-change="changePageSize"
:page-size="params.pageSize"
show-total
show-sizer>
show-sizer
>
</Page>
</div>
</div>
@ -44,135 +66,136 @@
</div>
</template>
<script>
import {couponList, receiveCoupon} from '@/api/member.js'
import { couponList, receiveCoupon } from "@/api/member.js";
export default {
data () {
data() {
return {
list: [], // 优惠券列表
total: 0, // 优惠券总数
params: { // 请求参数
getType: 'FREE',
params: {
// 请求参数
getType: "FREE",
pageNumber: 1,
pageSize: 20
}
}
pageSize: 20,
},
};
},
methods: {
// 搜索优惠券
search (item) {
this.params.couponName = item
this.params.pageNumber = 1
this.getList()
search(item) {
this.params.couponName = item;
this.params.pageNumber = 1;
this.getList();
},
// 获取优惠券列表
getList () {
this.$Spin.show()
couponList(this.params).then(res => {
this.$Spin.hide()
this.loading = false
if (res.success) {
this.list = res.result.records
this.total = res.result.total
}
}).catch(() => { this.$Spin.hide() })
getList() {
this.$Spin.show();
couponList(this.params)
.then((res) => {
this.$Spin.hide();
this.loading = false;
if (res.success) {
this.list = res.result.records;
this.total = res.result.total;
}
})
.catch(() => {
this.$Spin.hide();
});
},
// 分页 改变页码
changePageNum (val) {
changePageNum(val) {
this.params.pageNumber = val;
this.getList()
this.getList();
},
// 分页 改变每页数
changePageSize (val) {
changePageSize(val) {
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList()
this.getList();
},
// 领取优惠券
receive (item) {
receiveCoupon(item.id).then(res => {
receive(item) {
receiveCoupon(item.id).then((res) => {
if (res.success) {
console.log(item);
this.$Modal.confirm({
title: '领取优惠券',
content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
okText: '我的优惠券',
cancelText: '立即使用',
title: "领取优惠券",
content: "<p>优惠券领取成功，可到我的优惠券页面查看</p>",
okText: "我的优惠券",
cancelText: "立即使用",
closable: true,
onOk: () => {
this.$router.push('/home/Coupons')
this.$router.push("/home/Coupons");
},
onCancel: () => {
if (item.storeId !== '0') {
this.$router.push({path: '/merchant', query: {id: item.storeId}})
} else {
if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
} else {
this.$router.push({path: '/goodsList'})
}
}
}
this.$router.push({
path: "/goodsList",
query: { promotionsId: item.id, promotionType: "COUPON" },
});
},
});
}
})
});
},
// 优惠券可用范围
useScope (type, storeName) {
let shop = '平台';
let goods = '全部商品'
if (storeName !== 'platform') shop = storeName
useScope(type, storeName) {
let shop = "平台";
let goods = "全部商品";
if (storeName !== "platform") shop = storeName;
switch (type) {
case 'ALL':
goods = '全部商品'
case "ALL":
goods = "全部商品";
break;
case 'PORTION_GOODS':
goods = '部分商品'
case "PORTION_GOODS":
goods = "部分商品";
break;
case 'PORTION_GOODS_CATEGORY':
goods = '部分分类商品'
case "PORTION_GOODS_CATEGORY":
goods = "部分分类商品";
break;
}
return `${shop}${goods}可用`
}
return `${shop}${goods}可用`;
},
},
mounted () {
this.getList()
}
}
mounted() {
this.getList();
},
};
</script>
<style lang="scss" scoped>
@import '../assets/styles/coupon.scss';
.content{
width: 100%;
background-color: #fff;
@import "../assets/styles/coupon.scss";
.content {
width: 100%;
background-color: #fff;
> div {
margin: 10px auto;
width: 1200px;
}
> div {
margin: 10px auto;
width: 1200px;
}
.coupon-title {
display: flex;
align-items: center;
}
.coupon-title {
display: flex;
align-items: center;
p{
font-size: 18px;
margin-right: 500px;
}
border-bottom: 2px solid $theme_color;
p {
font-size: 18px;
margin-right: 500px;
}
.recommend {
margin: 20px auto;
font-weight: bold;
width: 200px;
text-align: center;
}
.coupon-item {
b{
background: url('../assets/images/small-circle.png') top left repeat-y;
}
}
.pageration {
text-align: right;
padding-bottom: 10px;
border-bottom: 2px solid $theme_color;
}
.recommend {
margin: 20px auto;
font-weight: bold;
width: 200px;
text-align: center;
}
.coupon-item {
b {
background: url("../assets/images/small-circle.png") top left repeat-y;
}
}
.pageration {
text-align: right;
padding-bottom: 10px;
}
</style>

29
buyer/src/pages/GoodsList.vue
View File

@ -82,20 +82,24 @@
</div>
<div class="goods-show-right">
<Tag class="goods-show-tag" color="red" v-if="item.content.selfOperated">
<Tag
class="goods-show-tag"
color="red"
v-if="item.content.selfOperated"
>
自营
</Tag>
<Tag
class="goods-show-tag" color="blue"
class="goods-show-tag"
color="blue"
v-if="item.content.goodsType == 'VIRTUAL_GOODS'"
>
虚拟
</Tag>
<Tag
class="goods-show-tag" color="blue"
v-else-if="
item.content.goodsType == 'PHYSICAL_GOODS'
"
class="goods-show-tag"
color="blue"
v-else-if="item.content.goodsType == 'PHYSICAL_GOODS'"
>
实物
</Tag>
@ -155,13 +159,21 @@ export default {
watch: {
$route() {
const keyword = this.$route.query.keyword;
this.handleSearch(keyword);
if (keyword) {
this.handleSearch(keyword);
}
if (this.$route.query.categoryId) {
let cateId = this.$route.query.categoryId.split(",");
Object.assign(this.params, this.$route.query);
this.params.categoryId = cateId[cateId.length - 1];
this.getGoodsList();
}
if (this.$route.query.promotionType) {
this.params.promotionType = this.$route.query.promotionType;
}
if (this.$route.query.promotionsId) {
this.params.promotionsId = this.$route.query.promotionsId;
}
this.getGoodsList();
},
},
methods: {
@ -301,7 +313,6 @@ export default {
margin-top: 5px;
}
.goods-show-self {
float: left;
height: 16px;

151
buyer/src/pages/home/userCenter/Coupons.vue
View File

@ -1,136 +1,155 @@
<template>
<div class="wrapper">
<card _Title="优惠券列表" :_Tabs="statusNameList" @_Change="change" />
<empty v-if="list.length==0" />
<empty v-if="list.length == 0" />
<ul class="coupon-list" v-else>
<li v-for="(item, index) in list" class="coupon-item" :key="index">
<div class="c-left">
<div>
<span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{item.price | unitPrice}}</span></span>
<span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.discount}}</span>折</span>
<span class="describe">满{{item.consumeThreshold}}元可用</span>
<span
v-if="item.couponType === 'PRICE'"
class="fontsize_12 global_color"
>￥<span class="price">{{ item.price | unitPrice }}</span></span
>
<span
v-if="item.couponType === 'DISCOUNT'"
class="fontsize_12 global_color"
><span class="price">{{ item.discount }}</span
>折</span
>
<span class="describe">满{{ item.consumeThreshold }}元可用</span>
</div>
<p>使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
<p>有效期：{{item.endTime}}</p>
<p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
<p>有效期：{{ item.endTime }}</p>
</div>
<b></b>
<a class="c-right" :class="{'canot-use':params.memberCouponStatus !== 'NEW'}" @click="go(item)">立即使用</a>
<a
class="c-right"
:class="{ 'canot-use': params.memberCouponStatus !== 'NEW' }"
@click="go(item)"
>立即使用</a
>
<i class="circle-top"></i>
<i class="circle-bottom"></i>
</li>
</ul>
<Page :total="total" @on-change="changePageNum"
<Page
:total="total"
@on-change="changePageNum"
class="pageration"
@on-page-size-change="changePageSize"
:page-size="params.pageSize"
show-total
show-sizer>
show-sizer
>
</Page>
<Spin v-if="loading" fix></Spin>
</div>
</template>
<script>
import { memberCouponList } from '@/api/member.js';
import { memberCouponList } from "@/api/member.js";
export default {
name: 'Coupons',
data () {
name: "Coupons",
data() {
return {
statusNameList: [ // 优惠券状态
'未使用',
'已使用',
'已过期'
statusNameList: [
// 优惠券状态
"未使用",
"已使用",
"已过期",
],
statusList: ['NEW', 'USED', 'EXPIRE'], // 优惠券状态
statusList: ["NEW", "USED", "EXPIRE"], // 优惠券状态
loading: false, // 列表加载状态
params: { // 请求参数
params: {
// 请求参数
pageNumber: 1,
pageSize: 10,
memberCouponStatus: 'NEW'
memberCouponStatus: "NEW",
},
total: 0, // 优惠券总数
list: [] // 优惠券列表
list: [], // 优惠券列表
};
},
methods: {
getList () { // 获取优惠券列表
this.loading = true
memberCouponList(this.params).then(res => {
this.loading = false
getList() {
// 获取优惠券列表
this.loading = true;
memberCouponList(this.params).then((res) => {
this.loading = false;
if (res.success) {
this.list = res.result.records
this.total = res.result.total
this.list = res.result.records;
this.total = res.result.total;
}
})
});
},
// 切换优惠券状态
change (index) {
this.params.memberCouponStatus = this.statusList[index]
change(index) {
this.params.memberCouponStatus = this.statusList[index];
this.params.pageNumber = 1;
this.getList()
this.getList();
},
go (item) { // 根据使用条件跳转商品列表页面
if (this.params.memberCouponStatus !== 'NEW') return;
go(item) {
// 根据使用条件跳转商品列表页面
if (this.params.memberCouponStatus !== "NEW") return;
if (item.storeId !== '0') {
this.$router.push({path: '/merchant', query: {id: item.storeId}})
} else {
if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
} else {
this.$router.push({path: '/goodsList'})
}
}
this.$router.push({
path: "/goodsList",
query: { promotionsId: item.couponId, promotionType: "COUPON" },
});
},
changePageNum (val) { // 分页改变页码
changePageNum(val) {
// 分页改变页码
this.params.pageNumber = val;
this.getList()
this.getList();
},
changePageSize (val) { // 分页改变页数
changePageSize(val) {
// 分页改变页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList()
this.getList();
},
useScope (type, storeName) { // 根据字段返回 优惠券适用范围
let shop = '平台';
let goods = '全部商品'
if (storeName !== 'platform') shop = storeName
useScope(type, storeName) {
// 根据字段返回 优惠券适用范围
let shop = "平台";
let goods = "全部商品";
if (storeName !== "platform") shop = storeName;
switch (type) {
case 'ALL':
goods = '全部商品'
case "ALL":
goods = "全部商品";
break;
case 'PORTION_GOODS':
goods = '部分商品'
case "PORTION_GOODS":
goods = "部分商品";
break;
case 'PORTION_GOODS_CATEGORY':
goods = '部分分类商品'
case "PORTION_GOODS_CATEGORY":
goods = "部分分类商品";
break;
}
return `${shop}${goods}可用`
}
return `${shop}${goods}可用`;
},
},
mounted () {
this.getList()
}
}
mounted() {
this.getList();
},
};
</script>
<style scoped lang="scss">
@import '../../../assets/styles/coupon.scss';
.coupon-item{
@import "../../../assets/styles/coupon.scss";
.coupon-item {
height: 125px;
.c-left{
.c-left {
padding: 16px;
}
.c-right{
.c-right {
padding: 20px 16px;
width: 43px;
font-size: 14px;
}
.canot-use{
.canot-use {
color: #999;
background-color: #eee;
}

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

@ -209,28 +209,34 @@ export const auditApplySeckill = params => {
export const getFullDiscountList = params => {
return getRequest(`/promotion/fullDiscount`, params);
};
// 满优惠列表
export const getFullDiscountById = id => {
return getRequest(`/promotion/fullDiscount/${id}`);
};
// 开启、关闭满额活动
export const updateFullDiscount = (id, promotionStatus) => {
return putRequest(`/promotion/fullDiscount/status/${id}`)
}
// 积分商品列表
export const getPointsGoodsList = params => {
return getRequest(`/promotion/pointsGoods`, params);
};
// 积分商品详情
export const getPointsGoodsById = id => {
return getRequest(`/promotion/pointsGoods/${id}`);
};
// 添加积分商品
export const addPointsGoods = params => {
return postRequest(`/promotion/pointsGoods`, params, {
"Content-type": "application/json"
});
};
// 修改积分商品
export const updatePointsGoods = params => {
return putRequest(`/promotion/pointsGoods`, params, {
@ -250,19 +256,28 @@ export const deletePointsGoodsStatus = id => {
export const getPointsGoodsCategoryList = params => {
return getRequest(`/promotion/pointsGoodsCategory`, params);
};
// 积分商品分类详情
export const getPointsGoodsCategoryById = id => {
return getRequest(`/promotion/pointsGoodsCategory/${id}`);
};
// 添加积分商品分类
export const addPointsGoodsCategory = params => {
return postRequest(`/promotion/pointsGoodsCategory`, params);
};
// 更新积分商品分类
export const updatePointsGoodsCategory = params => {
return putRequest(`/promotion/pointsGoodsCategory`, params);
};
// 删除积分商品分类
export const deletePointsGoodsCategoryById = id => {
return deleteRequest(`/promotion/pointsGoodsCategory/${id}`);
};
// 获取优惠券领取记录
export const getCouponReceiveList = (params) => {
return getRequest("/promotion/coupon/received", params);
};

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

@ -193,6 +193,12 @@ export const otherRouter = {
name: "manager-coupon",
component: () => import("@/views/promotions/coupon/coupon.vue")
},
{
path: "promotions/coupon-receive",
title: "优惠券领取记录",
name: "coupon-receive",
component: () => import("@/views/promotions/coupon/coupon-receive.vue"),
},
{
path: "promotions/add-platform-coupon",
title: "添加平台优惠券",

29
manager/src/utils/promotions.js
View File

@ -57,4 +57,31 @@ export function promotionsScopeTypeRender(h, params) {
]);
}
export function memberPromotionsStatusRender(h, status) {
let text = "未知",
color = "red";
if (status == "NEW") {
text = "已领取";
color = "geekblue";
} else if (status == "USED") {
text = "已使用";
color = "green";
} else if (status == "EXPIRE") {
text = "已过期";
color = "red";
} else if (status == "CLOSED") {
text = "已作废";
color = "red";
}
return h("div", [
h(
"Tag",
{
props: {
color: color,
},
},
text
),
]);
}

321
manager/src/views/promotions/coupon/coupon-receive.vue Normal file
View File

@ -0,0 +1,321 @@
<template>
<div class="search">
<Card>
<Button style="margin-bottom: 10px" @click="back()">返回</Button>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="75"
class="search-form mb_10"
>
<Form-item label="优惠券名称" prop="couponName">
<Input
type="text"
v-model="searchForm.couponName"
placeholder="请输入优惠券名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="获取方式" prop="getType">
<Select
v-model="searchForm.getType"
placeholder="请选择"
clearable
style="width: 200px"
>
<Option value="FREE">免费获取</Option>
<Option value="ACTIVITY">活动获取</Option>
</Select>
</Form-item>
<Form-item label="优惠券状态" prop="memberCouponStatus">
<Select
v-model="searchForm.memberCouponStatus"
placeholder="请选择"
clearable
style="width: 200px"
>
<Option value="NEW">已领取</Option>
<Option value="USED">已使用</Option>
<Option value="EXPIRE">已过期</Option>
<Option value="CLOSED">已作废</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>
<Table
v-if="refreshTable"
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
class="mt_10"
@on-selection-change="changeSelect"
>
</Table>
<Row type="flex" justify="end" class="mt_10">
<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 { getCouponReceiveList } from "@/api/promotion";
import {
memberPromotionsStatusRender,
promotionsScopeTypeRender,
} from "@/utils/promotions";
export default {
name: "coupon-recevie",
data() {
return {
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "create_time", // 默认排序字段
order: "desc", // 默认排序方式
getType: "", // 默认排序方式
couponId: this.$route.query.couponId, // 优惠券id
},
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
title: "会员名称",
key: "memberName",
minWidth: 130,
fixed: "left",
},
{
title: "优惠券名称",
key: "couponName",
minWidth: 100,
tooltip: true,
},
{
title: "发布店铺",
key: "storeName",
minWidth: 100,
render: (h, params) => {
return h("div", (params.row.storeName === 'platform' && "平台") || params.row.storeName);
},
},
{
title: "面额/折扣",
key: "price",
width: 100,
render: (h, params) => {
if (params.row.price) {
return h(
"div",
this.$options.filters.unitPrice(params.row.price, "￥")
);
} else {
return h("div", params.row.discount + "折");
}
},
},
{
title: "使用门槛",
key: "consumeThreshold",
width: 130,
},
{
title: "获取方式",
width: 120,
key: "getType",
render: (h, params) => {
if (params.row.getType === "FREE") {
return h("Tag", { props: { color: "red" } }, "免费获取");
} else if (params.row.getType === "ACTIVITY") {
return h("Tag", { props: { color: "volcano" } }, "活动获取");
} else if (params.row.getType === "INSIDE") {
return h("Tag", { props: { color: "lime" } }, "内购");
} else {
return h("Tag", { props: { color: "purple" } }, "未知");
}
},
},
{
title: "会员优惠券状态",
width: 130,
key: "memberCouponStatus",
render: (h, params) => {
return memberPromotionsStatusRender(
h,
params.row.memberCouponStatus
);
},
},
{
title: "优惠券类型",
key: "couponType",
width: 120,
render: (h, params) => {
if (params.row.couponType === "DISCOUNT") {
return h("Tag", { props: { color: "orange" } }, "打折");
} else if (params.row.couponType === "PRICE") {
return h("Tag", { props: { color: "magenta" } }, "减免现金");
} else {
return h("Tag", { props: { color: "purple" } }, "未知");
}
},
},
{
title: "品类描述",
key: "scopeType",
width: 120,
render: (h, params) => {
return promotionsScopeTypeRender(h, params);
},
},
{
title: "有效时间",
width: 150,
render: (h, params) => {
if (
params?.row?.getType === "ACTIVITY" &&
params?.row?.rangeDayType === "DYNAMICTIME"
) {
return h("div", "长期有效");
} else if (params?.row?.startTime && params?.row?.endTime) {
return h("div", {
domProps: {
innerHTML:
params.row.startTime + "<br/>" + params.row.endTime,
},
});
}
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
refreshTable: true, // 修改选中状态后刷新表格
selectDate: [], //选中的信息
};
},
props: {
promotionStatus: {
type: String,
default: "",
},
},
watch: {
$route(e) {
// 监听路由，参数变化调取接口
this.searchForm.couponId = e.query.couponId;
if (this.couponId) {
this.getDataList();
} else {
this.$refs.form.resetFields();
}
},
},
methods: {
back() {
this.$store.commit("removeTag", "coupon-receive");
this.$router.go(-1);
},
check() {
// 选中的优惠券
this.$emit("selected", this.selectList);
},
// 初始化数据
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();
},
/**
* 选择优惠券
*/
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
if (this.getType === "ACTIVITY") this.check();
},
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;
}
getCouponReceiveList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
console.log(res);
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
},
mounted() {
this.init();
},
};
</script>

50
manager/src/views/promotions/coupon/coupon.vue
View File

@ -17,6 +17,17 @@
style="width: 200px"
/>
</Form-item>
<Form-item label="获取方式" prop="getType">
<Select
v-model="searchForm.getType"
placeholder="请选择"
clearable
style="width: 200px"
>
<Option value="FREE">免费获取</Option>
<Option value="ACTIVITY">活动获取</Option>
</Select>
</Form-item>
<Form-item label="活动状态" prop="promotionStatus">
<Select
v-model="searchForm.promotionStatus"
@ -50,6 +61,7 @@
<Row class="operation padding-row" v-if="getType !== 'ACTIVITY'">
<Button @click="add" type="primary">添加优惠券</Button>
<Button @click="delAll">批量关闭</Button>
<Button @click="receivePage()" type="info">优惠券领取记录</Button>
</Row>
<Table
v-if="refreshTable"
@ -97,6 +109,13 @@
@click="remove(row)"
>删除
</Button>
<Button
style="margin: 5px"
type="info"
size="small"
@click="receivePage(row.id)"
>领取记录
</Button>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
@ -150,12 +169,6 @@ export default {
align: "center",
fixed: "left",
},
{
title: "活动名称",
key: "promotionName",
width: 180,
fixed: "left",
},
{
title: "优惠券名称",
key: "couponName",
@ -200,6 +213,24 @@ export default {
return h("div", params.row.usedNum + "/" + params.row.receivedNum);
},
},
{
title: "获取方式",
width: 120,
key: "getType",
render: (h, params) => {
if (params.row.getType === "FREE") {
return h("Tag", { props: { color: "red" } }, "免费获取");
} else if (params.row.getType === "ACTIVITY") {
return h("Tag", { props: { color: "volcano" } }, "活动获取");
} else if (params.row.getType === "INSIDE") {
return h("Tag", { props: { color: "lime" } }, "内购");
} else if (params.row.getType === "IGAME") {
return h("Tag", { props: { color: "lime" } }, "游戏人生");
} else {
return h("Tag", { props: { color: "purple" } }, "未知");
}
},
},
{
title: "优惠券类型",
key: "couponType",
@ -324,6 +355,13 @@ export default {
// 选中的优惠券
this.$emit("selected", this.selectList);
},
receivePage(id) {
if (id) {
this.$router.push({ name: "coupon-receive", query: { couponId: id } });
} else {
this.$router.push({ name: "coupon-receive" });
}
},
// 初始化数据
init() {
this.getDataList();

51
seller/src/api/promotion.js
View File

@ -4,47 +4,47 @@ import { getRequest, postRequest, postRequestWithNoForm, putRequest, deleteReque
// 获取店铺直播间列表
export const getLiveList = (params) => {
return getRequest('/broadcast/studio', params)
return getRequest('/broadcast/studio', params)
}
// 添加直播间
export const addLive = (params) => {
return postRequest('/broadcast/studio', params)
return postRequest('/broadcast/studio', params)
}
// 获取直播间详情
export const getLiveInfo = (studioId) => {
return getRequest(`/broadcast/studio/studioInfo/${studioId}`)
return getRequest(`/broadcast/studio/studioInfo/${studioId}`)
}
// 修改直播间
export const editLive = (params) => {
return putRequest('/broadcast/studio/edit', params)
return putRequest('/broadcast/studio/edit', params)
}
// 获取店铺直播商品
export const getLiveGoods = (params) => {
return getRequest('/broadcast/commodity', params)
return getRequest('/broadcast/commodity', params)
}
// 店铺直播间删除商品
export const delLiveGoods = (goodsId) => {
return deleteRequest(`/broadcast/commodity/${goodsId}`)
return deleteRequest(`/broadcast/commodity/${goodsId}`)
}
// 直播间删除商品
export const delRoomLiveGoods = (roomId,liveGoodsId) => {
return deleteRequest(`/broadcast/studio/deleteInRoom/${roomId}/${liveGoodsId}`)
export const delRoomLiveGoods = (roomId, liveGoodsId) => {
return deleteRequest(`/broadcast/studio/deleteInRoom/${roomId}/${liveGoodsId}`)
}
// 添加店铺直播商品
export const addLiveStoreGoods = (params) => {
return postRequestWithNoForm('/broadcast/commodity', params)
return postRequestWithNoForm('/broadcast/commodity', params)
}
// 店铺直播间添加
export const addLiveGoods = (params) => {
return putRequest(`/broadcast/studio/push/${params.roomId}/${params.liveGoodsId}`, {goodsId: params.goodsId})
return putRequest(`/broadcast/studio/push/${params.roomId}/${params.liveGoodsId}`, { goodsId: params.goodsId })
}
// 获取拼团列表
@ -53,11 +53,11 @@ export const getPintuanList = (params) => {
}
// 新建 拼团
export const savePintuan = (params) => {
return postRequest('/promotion/pintuan', params,{'Content-type': 'application/json'})
return postRequest('/promotion/pintuan', params, { 'Content-type': 'application/json' })
}
// 编辑 拼团
export const editPintuan = (params) => {
return putRequest('/promotion/pintuan', params,{'Content-type': 'application/json'})
return putRequest('/promotion/pintuan', params, { 'Content-type': 'application/json' })
}
// 手动开启拼团活动
export const editPintuanStatus = (pintuanId, params) => {
@ -76,17 +76,17 @@ export const getPintuanDetail = (id) => {
// 获取拼团商品列表
export const getPintuanGoodsList = (params) => {
return getRequest(`/promotion/pintuan/goods/${params.pintuanId}`,params)
return getRequest(`/promotion/pintuan/goods/${params.pintuanId}`, params)
}
// 新增优惠券
export const saveShopCoupon = (params) => {
return postRequest('/promotion/coupon', params,{'Content-type': 'application/json'})
return postRequest('/promotion/coupon', params, { 'Content-type': 'application/json' })
}
// 修改优惠券
export const editShopCoupon = (params) => {
return putRequest('/promotion/coupon', params,{'Content-type': 'application/json'})
return putRequest('/promotion/coupon', params, { 'Content-type': 'application/json' })
}
// 获取优惠券列表
@ -95,7 +95,7 @@ export const getShopCouponList = (params) => {
}
// 更新优惠券状态
export const updateCouponStatus = ( params) => {
export const updateCouponStatus = (params) => {
return putRequest(`/promotion/coupon/status`, params)
}
@ -123,17 +123,17 @@ export const deleteMemberReceiveCoupon = (ids, params) => {
// 限时秒杀活动列表
export const seckillList = (params) => {
return getRequest(`/promotion/seckill`,params)
return getRequest(`/promotion/seckill`, params)
}
// 限时秒杀活动商品
export const seckillGoodsList = (params) => {
return getRequest(`/promotion/seckill/apply`,params)
return getRequest(`/promotion/seckill/apply`, params)
}
// 添加限时抢购 商品
export const setSeckillGoods = (params) => {
return postRequest(`/promotion/seckill/apply/${params.seckillId}`,params.applyVos,{'Content-type': 'application/json'})
return postRequest(`/promotion/seckill/apply/${params.seckillId}`, params.applyVos, { 'Content-type': 'application/json' })
}
// 添加限时抢购 商品
@ -148,20 +148,20 @@ export const seckillDetail = (seckillId) => {
// 删除秒杀商品
export const delSeckillGoods = params => {
return deleteRequest(`/promotion/seckill/apply/${params.seckillId}/${params.id}`);
};
};
// 满减满赠活动列表
export const getFullDiscountList = (params) => {
return getRequest(`/promotion/fullDiscount`,params)
return getRequest(`/promotion/fullDiscount`, params)
}
// 新增满减活动
export const newFullDiscount = (params) => {
return postRequest(`/promotion/fullDiscount`,params,{'Content-type': 'application/json'})
return postRequest(`/promotion/fullDiscount`, params, { 'Content-type': 'application/json' })
}
// 编辑满减活动
export const editFullDiscount = (params) => {
return putRequest(`/promotion/fullDiscount`,params,{'Content-type': 'application/json'})
return putRequest(`/promotion/fullDiscount`, params, { 'Content-type': 'application/json' })
}
// 通过id获取满减活动
@ -177,3 +177,8 @@ export const delFullDiscount = (id) => {
export const updateFullDiscount = (id, params) => {
return putRequest(`/promotion/fullDiscount/status/${id}`, params)
}
// 获取优惠券领取记录
export const getCouponReceiveList = (params) => {
return getRequest("/promotion/coupon/received", params);
};

6
seller/src/router/router.js
View File

@ -158,6 +158,12 @@ export const otherRouter = {
name: "renovation",
component: () => import("@/views/shop/renovation.vue")
},
{
path: "promotions/coupon-receive",
title: "优惠券领取记录",
name: "coupon-receive",
component: () => import("@/views/promotion/coupon/coupon-receive.vue"),
},
// {
// path: "/*",
// name: "error-404",

29
seller/src/utils/promotions.js
View File

@ -57,4 +57,31 @@ export function promotionsScopeTypeRender(h, params) {
]);
}
export function memberPromotionsStatusRender(h, status) {
let text = "未知",
color = "red";
if (status == "NEW") {
text = "已领取";
color = "geekblue";
} else if (status == "USED") {
text = "已使用";
color = "green";
} else if (status == "EXPIRE") {
text = "已过期";
color = "red";
} else if (status == "CLOSED") {
text = "已作废";
color = "red";
}
return h("div", [
h(
"Tag",
{
props: {
color: color,
},
},
text
),
]);
}

285
seller/src/views/promotion/coupon/coupon-receive.vue Normal file
View File

@ -0,0 +1,285 @@
<template>
<div class="search">
<Card>
<Button style="margin-bottom: 10px" @click="back()">返回</Button>
<Form
ref="searchForm"
:model="searchForm"
inline
:label-width="75"
class="search-form mb_10"
>
<Form-item label="优惠券名称" prop="couponName">
<Input
type="text"
v-model="searchForm.couponName"
placeholder="请输入优惠券名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="会员名称" prop="memberName">
<Input
type="text"
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
/>
</Form-item>
<Form-item label="优惠券状态" prop="memberCouponStatus">
<Select
v-model="searchForm.memberCouponStatus"
placeholder="请选择"
clearable
style="width: 200px"
>
<Option value="NEW">已领取</Option>
<Option value="USED">已使用</Option>
<Option value="EXPIRE">已过期</Option>
<Option value="CLOSED">已作废</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>
<Table
v-if="refreshTable"
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
class="mt_10"
@on-selection-change="changeSelect"
>
</Table>
<Row type="flex" justify="end" class="mt_10">
<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 { getCouponReceiveList } from "@/api/promotion";
import {
memberPromotionsStatusRender,
promotionsScopeTypeRender,
} from "@/utils/promotions";
export default {
name: "coupon-recevie",
data() {
return {
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
pageNumber: 1, // 当前页数
pageSize: 10, // 页面大小
sort: "create_time", // 默认排序字段
order: "desc", // 默认排序方式
getType: "", // 默认排序方式
couponId: this.$route.query.couponId, // 优惠券id
},
selectList: [], // 多选数据
selectCount: 0, // 多选计数
columns: [
// 表头
{
title: "会员名称",
key: "memberName",
fixed: "left",
},
{
title: "优惠券名称",
key: "couponName",
minWidth: 100,
tooltip: true,
},
{
title: "面额/折扣",
key: "price",
width: 100,
render: (h, params) => {
if (params.row.price) {
return h(
"div",
this.$options.filters.unitPrice(params.row.price, "￥")
);
} else {
return h("div", params.row.discount + "折");
}
},
},
{
title: "使用门槛",
key: "consumeThreshold",
width: 130,
},
{
title: "会员优惠券状态",
width: 130,
key: "memberCouponStatus",
render: (h, params) => {
return memberPromotionsStatusRender(
h,
params.row.memberCouponStatus
);
},
},
{
title: "优惠券类型",
key: "couponType",
width: 120,
render: (h, params) => {
if (params.row.couponType === "DISCOUNT") {
return h("Tag", { props: { color: "orange" } }, "打折");
} else if (params.row.couponType === "PRICE") {
return h("Tag", { props: { color: "magenta" } }, "减免现金");
} else {
return h("Tag", { props: { color: "purple" } }, "未知");
}
},
},
{
title: "品类描述",
key: "scopeType",
width: 120,
render: (h, params) => {
return promotionsScopeTypeRender(h, params);
},
},
{
title: "有效时间",
width: 150,
render: (h, params) => {
if (
params?.row?.getType === "ACTIVITY" &&
params?.row?.rangeDayType === "DYNAMICTIME"
) {
return h("div", "长期有效");
} else if (params?.row?.startTime && params?.row?.endTime) {
return h("div", {
domProps: {
innerHTML:
params.row.startTime + "<br/>" + params.row.endTime,
},
});
}
},
},
],
data: [], // 表单数据
total: 0, // 表单数据总数
refreshTable: true, // 修改选中状态后刷新表格
selectDate: [], //选中的信息
};
},
props: {
promotionStatus: {
type: String,
default: "",
},
},
watch: {
$route(e) {
// 监听路由，参数变化调取接口
this.searchForm.couponId = e.query.couponId;
if (this.couponId) {
this.getDataList();
} else {
this.$refs.form.resetFields();
}
},
},
methods: {
back() {
this.$store.commit("removeTag", "coupon-receive");
this.$router.go(-1);
},
check() {
// 选中的优惠券
this.$emit("selected", this.selectList);
},
// 初始化数据
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();
},
/**
* 选择优惠券
*/
changeSelect(e) {
this.selectList = e;
this.selectCount = e.length;
if (this.getType === "ACTIVITY") this.check();
},
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;
}
getCouponReceiveList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
console.log(res);
this.data = res.result.records;
this.total = res.result.total;
}
});
this.total = this.data.length;
this.loading = false;
},
},
mounted() {
this.init();
},
};
</script>

22
seller/src/views/promotion/coupon/coupon.vue
View File

@ -53,6 +53,7 @@
<Row class="operator padding-row">
<Button @click="add" type="primary">添加</Button>
<Button @click="delAll" class="ml_10">批量关闭</Button>
<Button @click="receivePage()" class="ml_10" type="info">优惠券领取记录</Button>
</Row>
<Table
class="mt_10"
@ -86,6 +87,13 @@
@click="remove(row)"
>关闭</Button
>
<Button
style="margin: 5px"
type="info"
size="small"
@click="receivePage(row.id)"
>领取记录
</Button>
</template>
</Table>
<Row type="flex" justify="end" class="mt_10">
@ -136,11 +144,6 @@ export default {
align: "center",
fixed: "left",
},
{
title: "活动名称",
key: "promotionName",
fixed: "left",
},
{
title: "优惠券名称",
key: "couponName",
@ -204,7 +207,7 @@ export default {
},
{
title: "活动时间",
width: 150,
render: (h, params) => {
if (
params?.row?.getType === "ACTIVITY" &&
@ -246,6 +249,13 @@ export default {
init() {
this.getDataList();
},
receivePage(id) {
if (id) {
this.$router.push({ name: "coupon-receive", query: { couponId: id } });
} else {
this.$router.push({ name: "coupon-receive" });
}
},
add() {
this.$router.push({ name: "add-coupon" });
},