feat: 添加适用商城信息、及跳转逻辑

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

@@ -33,7 +33,8 @@
 
   &-date,
   &-code,
-  &-description {
+  &-description,
+  &-webs {
     margin-top: @margin-xss - 2;
     font-size: @font-size-base;
     color: @text-color-secondary;
@@ -58,7 +59,7 @@
   }
   
   &-actions {
-    margin-top: @margin-xss - 2;
+    margin-top: @margin-xss;
     text-align: right;
   }
 }
\ No newline at end of file

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

@@ -2,9 +2,11 @@
  * @Description 优惠券卡片
  */
 import React from 'react';
-import { Button, Tag, Tooltip } from 'antd';
+import { Button, message, Tag, Tooltip } from 'antd';
 import moment from 'moment';
+import { random } from 'lodash';
 import { MERCHANT_COUPON_TYPE_VOUCHER } from '@/constants/marketing';
+import { REQUEST_HEADER, TOP_DOMAIN } from '@/constants';
 import { COUPON_STATE_UNUSED, COUPON_STATE_USED, COUPON_STATE_EXPIRED } from '../../utils';
 import styles from './index.less';
 
@@ -65,6 +67,23 @@ type CouponCardDate = {
    * 商品Id集合(商品优惠券才有) ,Long
    */
   productIds: number[]
+  /**
+   * 商城信息 ,ShopResponse
+   */
+  shopList: {
+    /**
+     * 商城id
+     */
+    shopId?: number
+    /**
+     * 商城名称
+     */
+    shopName?: string
+    /**
+     * 商城url
+     */
+    url?: string
+  }[]
 }
 
 interface CouponCardProps {
@@ -82,8 +101,22 @@ interface CouponCardProps {
 const CouponCard: React.FC<CouponCardProps> = (props: CouponCardProps) => {
   const { data, status } = props;
 
+  const handleGoUse = () => {
+    if (!data.shopList && !data.shopList.length) {
+      message.warning('没有适用商城信息，无法进行跳转')
+      return;
+    }
+    const shop = data.shopList[random(0, data.shopList.length)];
+    if (!shop.url) {
+      message.warning('没有商城地址信息，无法进行跳转')
+      return;
+    }
+    const url = `${REQUEST_HEADER}${shop.url}${TOP_DOMAIN}/makeUpList/${data.couponId}?belongType=${data.belongType}`;
+    window.open(url);
+  };
+
   const ACTIONS_MAP = {
-    [COUPON_STATE_UNUSED]: (<Button type="primary" size="small">立即使用</Button>),
+    [COUPON_STATE_UNUSED]: (<Button type="primary" size="small" onClick={handleGoUse}>去使用</Button>),
     [COUPON_STATE_USED]: (<Button type="primary" size="small" disabled>已使用</Button>),
     [COUPON_STATE_EXPIRED]: (<Button type="primary" size="small" disabled>已过期</Button>),
   };
@@ -110,7 +143,13 @@ const CouponCard: React.FC<CouponCardProps> = (props: CouponCardProps) => {
         <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 className={styles['coupon-card-code']}>
+          券码：暂无
+        </div>
+        <div className={styles['coupon-card-webs']}>
+          适用商城：
+          {data.shopList.map((item) => item.shopName).join('、')}
+        </div>
       </div>
       <div className={styles['coupon-card-right']}>
         <div className={styles['coupon-card-yuanWrap']}>

src/pages/systemSetting/coupon/index.tsx

@@ -25,6 +25,14 @@ const MyCoupon: React.FC = () => {
 
   // const userInfo = getAuth();
 
+  const basicParams = {
+    environment: 4,
+    memberId: undefined,  // 这里传入 memberId 反倒查不出数据，只能跟app、小程序一致不传了
+    roleId: undefined,  // 这里传入 roleId 反倒查不出数据，只能跟app、小程序一致不传了
+    current: `1`,
+    pageSize: `99999`,
+  };
+
   const {
     data: analysis,
   } = useHttpRequest<GetMarketingWebCouponDetailCountResponse>(() => getMarketingWebCouponDetailCount({
@@ -38,12 +46,8 @@ const MyCoupon: React.FC = () => {
     loading,
   } = useHttpRequest<GetMarketingWebCouponDetailPageResponse>((
     params = {
-      shopId: `${66}`,
       status: `${COUPON_STATE_UNUSED}`,
-      memberId: undefined,  // 这里传入 memberId 反倒查不出数据，只能跟app、小程序一致不传了
-      roleId: undefined,  // 这里传入 roleId 反倒查不出数据，只能跟app、小程序一致不传了
-      current: `1`,
-      pageSize: `99999`,
+      ...basicParams,
     },
   ) => getMarketingWebCouponDetailPage(params), {
     manual: false,
@@ -52,12 +56,8 @@ const MyCoupon: React.FC = () => {
   const handleTabsChange = (activeKey: string) => {
     setActiveKey(activeKey);
     fetchCouponList({
-      shopId: `${66}`,
       status: activeKey,
-      memberId: undefined,  // 这里传入 memberId 反倒查不出数据，只能跟app、小程序一致不传了
-      roleId: undefined,  // 这里传入 roleId 反倒查不出数据，只能跟app、小程序一致不传了
-      current: `1`,
-      pageSize: `99999`,
+      ...basicParams,
     });
   };
 
@@ -71,9 +71,9 @@ const MyCoupon: React.FC = () => {
       >
         <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}`} />
+            <TabPane tab={`未使用 (${analysis?.receiveCount || 0})`} key={`${COUPON_STATE_UNUSED}`} />
+            <TabPane tab={`已使用 (${analysis?.userCount || 0})`} key={`${COUPON_STATE_USED}`} />
+            <TabPane tab={`已过期 (${analysis?.expireCount || 0})`} key={`${COUPON_STATE_EXPIRED}`} />
           </Tabs>
         </div>
       </MellowCard>