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

config/routes/authConfigRoute.ts

@@ -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',

src/locales/zh-CN/menu.ts

@@ -495,6 +495,7 @@ export default {
   'menu.systemSetting.authConfig.userDetail': '查看用户',
 
   'menu.systemSetting.collection': '收藏管理',
+  'menu.systemSetting.myCoupon': '优惠券',
   'menu.systemSetting.accountSetting': '账号安全设置',
   'menu.systemSetting.editAccount': '编辑账号信息',
 

src/pages/systemSetting/coupon/components/CouponCard/index.less

+@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

src/pages/systemSetting/coupon/components/CouponCard/index.tsx

+/**
+ * @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;

src/pages/systemSetting/coupon/index.less

+@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

src/pages/systemSetting/coupon/index.tsx

+/**
+ * @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;

src/pages/systemSetting/coupon/utils.ts

+/**
+ * 未使用
+ */
+export const COUPON_STATE_UNUSED = 1;
+/**
+ * 已使用
+ */
+export const COUPON_STATE_USED = 2;
+/**
+ * 已过期
+ */
+export const COUPON_STATE_EXPIRED = 3;
\ No newline at end of file