Commit bc2bc2f0 authored by XieZhiXiong's avatar XieZhiXiong

feat: 添加 系统能力 优惠券页面相关

parent d7e013f8
......@@ -91,6 +91,12 @@ const AuthConfigRoute: RouterChild = {
name: 'collection',
component: '@/pages/systemSetting/collection',
},
// 优惠券
{
path: '/memberCenter/systemSetting/coupon',
name: 'myCoupon',
component: '@/pages/systemSetting/coupon',
},
// 账户安全设置
{
path: '/memberCenter/systemSetting/accountSetting',
......
......@@ -495,6 +495,7 @@ export default {
'menu.systemSetting.authConfig.userDetail': '查看用户',
'menu.systemSetting.collection': '收藏管理',
'menu.systemSetting.myCoupon': '优惠券',
'menu.systemSetting.accountSetting': '账号安全设置',
'menu.systemSetting.editAccount': '编辑账号信息',
......
@import '~antd/es/style/themes/default.less';
@import '../../../../../global/styles/utils.less';
@card-prefix: coupon-card;
.@{card-prefix} {
display: flex;
align-items: center;
padding: @padding-md;
background-color: #FFFFFF;
border-radius: @border-radius-base * 4;
&-left {
flex: 1;
overflow: hidden;
}
&-right {
flex-shrink: 0;
}
&-belong {
padding: 0 @padding-xss;
border: none;
}
&-name {
margin-top: @margin-xss - 2;
font-size: @font-size-lg;
color: @text-color;
.textOverflow();
}
&-date,
&-code,
&-description {
margin-top: @margin-xss - 2;
font-size: @font-size-base;
color: @text-color-secondary;
}
&-description {
text-align: right;
}
&-yuanWrap {
text-align: right;
}
&-yuan {
font-size: @font-size-sm;
color: @error-color;
}
&-denomination {
font-size: @font-size-sm * 2;
color: @error-color;
}
&-actions {
margin-top: @margin-xss - 2;
text-align: right;
}
}
\ No newline at end of file
/**
* @Description 优惠券卡片
*/
import React from 'react';
import { Button, Tag, Tooltip } from 'antd';
import moment from 'moment';
import { MERCHANT_COUPON_TYPE_VOUCHER } from '@/constants/marketing';
import { COUPON_STATE_UNUSED, COUPON_STATE_USED, COUPON_STATE_EXPIRED } from '../../utils';
import styles from './index.less';
type CouponCardDate = {
/**
* 领取记录id
*/
id: number
/**
* 优惠券id
*/
couponId: number
/**
* 所属类型1-平台2-商家
*/
belongType: number
/**
* 优惠券名称
*/
name: string
/**
* 优惠券类型,如果所属类型为平台则有1-0元抵扣券2-平台通用优惠券,如果所属类型为商家则有1-0元抵扣券2-商家通用优惠券3-品类优惠券4-品牌优惠券5-商品优惠券
*/
type: number
/**
* 优惠券类型名称
*/
typeName: string
/**
* 券面额
*/
denomination: number
/**
* 使用条件,满多少金额可用
*/
useConditionMoney: number
/**
* 有效时间开始
*/
validTimeStart: number
/**
* 有效时间结束
*/
validTimeEnd: number
/**
* 领取时间
*/
crateTime: number
/**
* 品牌id集合(品牌优惠券才有) ,Long
*/
brandIds: number[]
/**
* 品类id集合(品类优惠券才有) ,Long
*/
categoryIds: number[]
/**
* 商品Id集合(商品优惠券才有) ,Long
*/
productIds: number[]
}
interface CouponCardProps {
/**
* 数据,后台数据没有返回 status
* 所以自己整一个 status
*/
data: CouponCardDate,
/**
* 优惠券状态
*/
status: number,
}
const CouponCard: React.FC<CouponCardProps> = (props: CouponCardProps) => {
const { data, status } = props;
const ACTIONS_MAP = {
[COUPON_STATE_UNUSED]: (<Button type="primary" size="small">立即使用</Button>),
[COUPON_STATE_USED]: (<Button type="primary" size="small" disabled>已使用</Button>),
[COUPON_STATE_EXPIRED]: (<Button type="primary" size="small" disabled>已过期</Button>),
};
return (
<div className={styles['coupon-card']}>
<div className={styles['coupon-card-left']}>
{data.type !== MERCHANT_COUPON_TYPE_VOUCHER ? (
<>
{data.belongType === 1 ? (
<Tag color="cyan" className={styles['coupon-card-belong']}>平台通用</Tag>
) : (
<Tag color="red" className={styles['coupon-card-belong']}>商家优惠券</Tag>
)}
</>
) : (
<Tag color="gold" className={styles['coupon-card-belong']}>0元购买抵扣劵</Tag>
)}
<Tooltip title={data.name}>
<div className={styles['coupon-card-name']}>
{data.name}
</div>
</Tooltip>
<div className={styles['coupon-card-date']}>
{`${data.validTimeStart ? moment(data.validTimeStart).format('YYYY-MM-DD') : ''}-${data.validTimeEnd ? moment(data.validTimeEnd).format('YYYY-MM-DD') : ''}`}
</div>
<div className={styles['coupon-card-code']}>券码:Y27NPES1</div>
</div>
<div className={styles['coupon-card-right']}>
<div className={styles['coupon-card-yuanWrap']}>
<span className={styles['coupon-card-yuan']}>¥</span>
<span className={styles['coupon-card-denomination']}>{data.denomination}</span>
</div>
<div className={styles['coupon-card-description']}>
{data.useConditionMoney}
元可用
</div>
<div className={styles['coupon-card-actions']}>
{ACTIONS_MAP[status]}
</div>
</div>
</div>
);
};
export default CouponCard;
@import '~antd/es/style/themes/default.less';
.myCoupon {
:global {
.ant-tabs-top
> .ant-tabs-nav {
margin: 0;
&::before {
border-bottom: none;
}
}
.ant-tabs-tab {
font-size: @font-size-lg;
}
}
&-list {
margin-top: @margin-md;
}
&-loading {
padding: 30px 50px;
text-align: center;
}
}
\ No newline at end of file
/**
* @Description 优惠券
*/
import React, { useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Tabs, Row, Col, Spin } from 'antd';
import {
getMarketingWebCouponDetailCount,
getMarketingWebCouponDetailPage,
GetMarketingWebCouponDetailCountResponse,
GetMarketingWebCouponDetailPageResponse,
} from '@/services/MarketingV2Api';
import { useHttpRequest } from '@/hooks/useHttpRequest';
// import { getAuth } from '@/utils/auth';
import { COUPON_STATE_UNUSED, COUPON_STATE_USED, COUPON_STATE_EXPIRED } from './utils';
import MellowCard from '@/components/MellowCard';
import CouponCard from './components/CouponCard';
import styles from './index.less';
const { TabPane } = Tabs;
const MyCoupon: React.FC = () => {
const [activeKey, setActiveKey] = useState(`${COUPON_STATE_UNUSED}`);
// const userInfo = getAuth();
const {
data: analysis,
} = useHttpRequest<GetMarketingWebCouponDetailCountResponse>(() => getMarketingWebCouponDetailCount({
shopId: `${66}`,
memberId: undefined, // 这里传入 memberId 反倒查不出数据,只能跟app、小程序一致不传了
roleId: undefined, // 这里传入 roleId 反倒查不出数据,只能跟app、小程序一致不传了
}), { manual: false });
const {
data: couponList,
run: fetchCouponList,
loading,
} = useHttpRequest<GetMarketingWebCouponDetailPageResponse>((
params = {
shopId: `${66}`,
status: `${COUPON_STATE_UNUSED}`,
memberId: undefined, // 这里传入 memberId 反倒查不出数据,只能跟app、小程序一致不传了
roleId: undefined, // 这里传入 roleId 反倒查不出数据,只能跟app、小程序一致不传了
current: `1`,
pageSize: `99999`,
},
) => getMarketingWebCouponDetailPage(params), {
manual: false,
});
const handleTabsChange = (activeKey: string) => {
setActiveKey(activeKey);
fetchCouponList({
shopId: `${66}`,
status: activeKey,
memberId: undefined, // 这里传入 memberId 反倒查不出数据,只能跟app、小程序一致不传了
roleId: undefined, // 这里传入 roleId 反倒查不出数据,只能跟app、小程序一致不传了
current: `1`,
pageSize: `99999`,
});
};
return (
<PageHeaderWrapper>
<MellowCard
bodyStyle={{
paddingTop: 0,
paddingBottom: 0,
}}
>
<div className={styles.myCoupon}>
<Tabs activeKey={activeKey} onChange={handleTabsChange}>
<TabPane tab={`未使用 (${analysis?.receiveCount})`} key={`${COUPON_STATE_UNUSED}`} />
<TabPane tab={`已使用 (${analysis?.userCount})`} key={`${COUPON_STATE_USED}`} />
<TabPane tab={`已过期 (${analysis?.expireCount})`} key={`${COUPON_STATE_EXPIRED}`} />
</Tabs>
</div>
</MellowCard>
<div className={styles['myCoupon-list']}>
{!loading ? (
<Row gutter={[16, 16]}>
{couponList?.data?.map((item) => (
<Col span={12} key={item.id}>
<CouponCard data={item} status={+activeKey} />
</Col>
))}
</Row>
) : (
<div className={styles['myCoupon-loading']}>
<Spin />
</div>
)}
</div>
</PageHeaderWrapper>
);
};
export default MyCoupon;
/**
* 未使用
*/
export const COUPON_STATE_UNUSED = 1;
/**
* 已使用
*/
export const COUPON_STATE_USED = 2;
/**
* 已过期
*/
export const COUPON_STATE_EXPIRED = 3;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment