@anker-in/campaign-ui 0.4.5-beta.9 → 0.4.6

package/src/components/credits/modal/ActivitiesModal.tsx

@@ -108,7 +108,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
         // 新增的部分任务都使用了 alpc 同一个任务类型，需要用任务 id 来区分
         return item.task_name.replace('Refund', data.productUnApprovedTask)
       } else if (taskIdToTypeMapping?.[String(item.task_rule_id)]) {
-        return dtcTaskTypeToNameMap[taskIdToTypeMapping?.[String(item.task_rule_id)]]
+        return dtcTaskTypeToNameMap[taskIdToTypeMapping?.[String(item.task_rule_id)]] || item.task_name
       } else {
         return taskNameMap[item.task_sub_type] || item.task_name
       }
@@ -174,7 +174,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
       className={cn('h-[800px] w-[640px]')}
       useAnimation
       animationClassName="md:translate-y-[100vh]"
-      scrollClassName=""
+      scrollClassName="flex flex-col"
       {...props}
       onScrollEnd={handleScrollEnd}
     >
@@ -198,62 +198,64 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
         </Tabs>
       </div>
 
-      <div className="grid gap-[18px] overflow-auto overscroll-contain md:gap-[12px]">
-        {isLoading && (
-          <div className="flex h-full flex-col items-center justify-center">
-            <LoadingDots />
-          </div>
-        )}
+      <div className="flex-1 overflow-auto overscroll-contain">
+        <div className="grid gap-[18px] md:gap-[12px]">
+          {isLoading && (
+            <div className="flex flex-1 flex-col items-center justify-center">
+              <LoadingDots />
+            </div>
+          )}
 
-        {!isLoading && (
-          <>
-            {list.length > 0 ? (
-              list.map((item, index) => (
-                <div
-                  key={index}
-                  className={cn(
-                    'flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]',
-                    !rounded && 'rounded-none'
-                  )}
-                >
-                  <div className="grid gap-[6px]">
-                    <div className="font-bold">{item.title}</div>
-                    <div className="text-[14px] font-semibold text-[#999]">
-                      {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
-                    </div>
-                    {!data.pendingTips && (
-                      <div
-                        className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}
-                      >
-                        <Text html={data.pendingTips} />
-                        <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>
-                        {data.pendingTips2 && <Text html={data.pendingTips2} />}
-                      </div>
-                    )}
-                  </div>
+          {!isLoading && (
+            <>
+              {list.length > 0 ? (
+                list.map((item, index) => (
                   <div
+                    key={index}
                     className={cn(
-                      'font-bold',
-                      item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'
+                      'flex h-fit items-center justify-between rounded-[8px] bg-[#f2f0f1] px-[16px] py-[20px] text-[16px]',
+                      !rounded && 'rounded-none'
                     )}
                   >
-                    {item.value >= 0 && '+'}
-                    {item.value}
+                    <div className="grid gap-[6px]">
+                      <div className="font-bold">{item.title}</div>
+                      <div className="text-[14px] font-semibold text-[#999]">
+                        {dayjs(item.date).format('YYYY-MM-DD HH:mm').toString()}
+                      </div>
+                      {!data.pendingTips && (
+                        <div
+                          className={`hidden text-[14px] font-semibold text-[#777] ${item.status === 2 && item.credit_type === 1 ? '!flex' : ''}`}
+                        >
+                          <Text html={data.pendingTips} />
+                          <span>{dayjs.unix(item.pending_time).add(1, 'day').format('YYYY-MM-DD')}</span>
+                          {data.pendingTips2 && <Text html={data.pendingTips2} />}
+                        </div>
+                      )}
+                    </div>
+                    <div
+                      className={cn(
+                        'font-bold',
+                        item.value >= 0 || item.credit_type === CreditType.Expired ? 'text-[#52C41A]' : 'text-[#F84D4F]'
+                      )}
+                    >
+                      {item.value >= 0 && '+'}
+                      {item.value}
+                    </div>
                   </div>
+                ))
+              ) : (
+                <div className="flex flex-col items-center justify-center py-[40px]">
+                  <Picture
+                    className="mb-[16px] h-[120px] w-[160px]"
+                    source={data?.emptyListImage?.url}
+                    alt={data?.emptyListImage?.alt || 'empty list image'}
+                  ></Picture>
+                  <div className="leading-1.4 text-[16px] font-semibold">{data?.emptyListLabel}</div>
                 </div>
-              ))
-            ) : (
-              <div className="flex h-full flex-col items-center justify-center">
-                <Picture
-                  className="mb-[16px] h-[120px] w-[160px]"
-                  source={data?.emptyListImage?.url}
-                  alt={data?.emptyListImage?.alt || 'empty list image'}
-                ></Picture>
-                <div className="leading-1.4 text-[16px] font-semibold">{data?.emptyListLabel}</div>
-              </div>
-            )}
-          </>
-        )}
+              )}
+            </>
+          )}
+        </div>
       </div>
       {/* 积分到账时间提醒 */}
       {list.length > 0 && <div className="mt-[12px] pb-[24px] text-[14px] font-semibold text-[#999]">{data.tips}</div>}

package/src/components/credits/modal/RewardsModal.tsx

@@ -251,11 +251,11 @@ function RewardsModal({ data, ...props }: RewardsModalProps) {
       className={classNames('h-[800px] w-[640px]')}
       useAnimation
       animationClassName="md:translate-y-[100vh]"
-      scrollClassName="md:mb-0"
-      {...props}
+      scrollClassName="md:mb-0 flex flex-col"
+        {...props}
       onScrollEnd={handleScrollEnd}
     >
-      <div className="">
+      <div className="shrink-0">
         <Tabs
           align="left"
           shape={rounded ? 'rounded' : 'square'}
@@ -275,13 +275,13 @@ function RewardsModal({ data, ...props }: RewardsModalProps) {
       </div>
 
       {isLoading && (
-        <div className="flex h-full flex-col items-center justify-center">
+        <div className="flex flex-1 flex-col items-center justify-center">
           <LoadingDots />
         </div>
       )}
 
       {!isLoading && (
-        <div className="mt-[24px] overflow-auto overscroll-contain">
+        <div className="mt-[24px] flex-1 overflow-auto overscroll-contain pb-[24px] md:pb-[48px]">
           {list.length > 0 ? (
             <div className="grid gap-[18px] md:gap-[12px]">
               {list.map((item, index) => (