feat: update material card

2025-09-08 23:28:17 +08:00
parent f2e7fd9d85
commit b9cd0a3e6d
4 changed files with 89 additions and 66 deletions
--- a/src/components/anchor-card/index.tsx
+++ b/src/components/anchor-card/index.tsx
@ -9,7 +9,7 @@ import { PageUrl } from '@/constants/app';
 import { MaterialViewSource, WORK_YEAR_LABELS } from '@/constants/material';
 import { AnchorInfo } from '@/types/material';
 import { calcDistance } from '@/utils/location';
-import { getBasicInfo } from '@/utils/material';
+import { getBasicInfo, getSalary } from '@/utils/material';
 import { navigateTo } from '@/utils/route';
 import { activeDate } from '@/utils/time';

@ -22,17 +22,6 @@ interface IProps {
 }

 const PREFIX = 'anchor-card';
-const getSalary = (data: AnchorInfo) => {
-  const { fullTimeMinPrice, fullTimeMaxPrice, partyTimeMinPrice, partyTimeMaxPrice } = data;
-  const prices: string[] = [];
-  if (fullTimeMinPrice && fullTimeMaxPrice) {
-    prices.push(`${fullTimeMinPrice / 1000}-${fullTimeMaxPrice / 1000}K/月`);
-  }
-  if (partyTimeMinPrice && partyTimeMaxPrice) {
-    prices.push(`${partyTimeMinPrice}-${partyTimeMaxPrice}/小时`);
-  }
-  return prices.filter(Boolean).join(' ');
-};

 function AnchorCard(props: IProps) {
  const { data, jobId, validator } = props;
--- a/src/components/material-card/index.less
+++ b/src/components/material-card/index.less
@ -4,7 +4,7 @@
 .material-card {
  padding: 32px 24px;
  border-radius: 16px;
-  background: #FFFFFF;
+  background: #ffffff;
  box-sizing: border-box;

  &__header {
@ -16,6 +16,10 @@
      .flex-row();
    }

+    &__right {
+      color: @blHighlightColor;
+    }
+
    &__title {
      font-size: 32px;
      line-height: 40px;
@ -50,7 +54,7 @@

  &__body {
    width: 100%;
-    height: 156px;
+    height: 160px;
    margin-top: 24px;
    .flex-column();
    justify-content: center;
@ -80,38 +84,44 @@
    }
  }

-  &__scroll-view {
-    position: relative;
+  &__info {
+    .flex-row();
+    gap: 24px;
+    width: 100%;
+
+    &-left {
+      width: 125px;
+      height: 160px;
+    }
+    &-cover {
      width: 100%;
      height: 100%;
-    .flex-row();
-
-    &::-webkit-scrollbar {
-      display: none;
+      border-radius: 12px;
    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      right: 0;
-      width: 102px;
-      height: 100%;
-      background: linear-gradient(91.41deg, rgba(255, 255, 255, 0) 1.86%, #FFFFFF 99.47%);
+    &-right {
+      .name {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 28px;
+        line-height: 32px;
+        color: @blColor;
+        margin-bottom: 12px;
      }
+      .info,
+      .worked {
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 36px;
+        color: @blColorG2;
+        margin-bottom: 8px;
      }
-
-  &__cover-list {
-    height: 100%;
-    .flex-row();
-  }
-
-  &__cover-image {
-    width: 120px;
-    height: 100%;
-    margin-right: 24px;
-    // 不知道为啥高度不对，可能 scroll-view 默认底部是滚动条高度？
-    margin-top: 38px;
-    border-radius: 8px;
-  }
+      .salary {
+        font-weight: 500;
+        font-size: 24px;
+        line-height: 36px;
+        color: @blColor;

      }
+    }
+  }
+}
--- a/src/components/material-card/index.tsx
+++ b/src/components/material-card/index.tsx
@ -1,4 +1,4 @@
-import { Image, ScrollView } from '@tarojs/components';
+import { Image } from '@tarojs/components';
 import Taro from '@tarojs/taro';

 import { Loading } from '@taroify/core';
@ -9,11 +9,12 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import LoginButton from '@/components/login-button';
 import { EventName, PageUrl } from '@/constants/app';
 import { CollectEventName, ReportEventId } from '@/constants/event';
+import { WORK_YEAR_LABELS } from '@/constants/material';
 import useUserInfo from '@/hooks/use-user-info';
 import { MaterialProfile } from '@/types/material';
 import { logWithPrefix } from '@/utils/common';
 import { collectEvent, reportEvent } from '@/utils/event';
-import { requestProfileDetail, sortVideos } from '@/utils/material';
+import { getBasicInfo, getSalary, requestProfileDetail, sortVideos } from '@/utils/material';
 import { navigateTo } from '@/utils/route';
 import Toast from '@/utils/toast';
 import { isValidUserInfo } from '@/utils/user';
@ -36,6 +37,7 @@ function MaterialCard(props: IProps) {
  const [profile, setProfile] = useState<MaterialProfile | null>(null);
  const refreshRef = useRef((_f?: boolean) => {});
  const hasMaterial = !!profile;
+  const firstCover = sortVideos(profile?.materialVideoInfoList || [])[0];

  const handleGoCreateProfile = useCallback(() => {
    reportEvent(ReportEventId.CLICK_GO_TO_CREATE_MATERIAL);
@ -44,7 +46,7 @@ function MaterialCard(props: IProps) {

  const handleGoProfile = useCallback(() => {
    if (!hasMaterial) {
-      realtimeLogger.info('handleGoProfile noMaterial')
+      realtimeLogger.info('handleGoProfile noMaterial');
      return;
    }
    navigateTo(PageUrl.MaterialProfile).catch(err => {
@ -67,7 +69,7 @@ function MaterialCard(props: IProps) {
      try {
        const profileDetail = await requestProfileDetail();
        if (!profileDetail) {
-          realtimeLogger.info('getProfileDetail no profileDetail')
+          realtimeLogger.info('getProfileDetail no profileDetail');
        }
        setProfile(profileDetail);
      } catch (e) {
@ -90,8 +92,10 @@ function MaterialCard(props: IProps) {
      refreshRef.current?.(true);
    };
    Taro.eventCenter.on(EventName.CREATE_PROFILE, callback);
+    Taro.eventCenter.on(EventName.UPDATE_PROFILE, callback);
    return () => {
      Taro.eventCenter.off(EventName.CREATE_PROFILE, callback);
+      Taro.eventCenter.on(EventName.UPDATE_PROFILE, callback);
    };
  }, [userInfo]);

@ -100,16 +104,11 @@ function MaterialCard(props: IProps) {
      <div className={`${PREFIX}__header`}>
        <div className={`${PREFIX}__header__left`}>
          <div className={`${PREFIX}__header__title`}>我的模卡</div>
-          {/* {profile && (
-            <div
-              className={`${PREFIX}__header__progress`}
-            >{`完成度${Math.min((profile.progressBar || 0) * 100, 100)}%`}</div>
-          )} */}
        </div>
        {profile && (
          <div className={`${PREFIX}__header__right`}>
-            {/* <div className={`${PREFIX}__header__status`}>{profile?.isOpen ? '开放中' : '关闭'}</div> */}
-            <ArrowRight className={`${PREFIX}__header__icon`} />
+            <div>查看</div>
+            <ArrowRight color="#6D3DF5" className={`${PREFIX}__header__icon`} />
          </div>
        )}
      </div>
@ -123,18 +122,21 @@ function MaterialCard(props: IProps) {
          </div>
        )}
        {!loading && hasMaterial && (
-          <ScrollView className={`${PREFIX}__scroll-view`} showScrollbar={false} enableFlex enhanced scrollX>
-            <div className={`${PREFIX}__cover-list`}>
-              {sortVideos(profile?.materialVideoInfoList || []).map(video => (
-                <Image
-                  className={`${PREFIX}__cover-image`}
-                  mode="aspectFit"
-                  key={video.coverUrl}
-                  src={video.coverUrl}
-                />
-              ))}
+          <div className={`${PREFIX}__info`}>
+            {firstCover && (
+              <div className={`${PREFIX}__info-left`}>
+                <Image className={`${PREFIX}__info-cover`} mode="aspectFit" src={firstCover.coverUrl} />
+              </div>
+            )}
+            <div className={`${PREFIX}__info-right`}>
+              <div className="name">{profile?.name}</div>
+              <div className="info">
+                {WORK_YEAR_LABELS[profile?.workedYear] || ''}·{getBasicInfo({ ...profile, shoeSize: null })}
+              </div>
+              <div className="worked">播过 {profile?.workedSecCategoryStr}</div>
+              <div className="salary">{getSalary(profile)}</div>
+            </div>
          </div>
-          </ScrollView>
        )}
        {loading && <Loading />}
      </div>
--- a/src/utils/material.ts
+++ b/src/utils/material.ts
@ -62,6 +62,28 @@ export const getBasicInfo = (profile: Pick<MaterialProfile, 'age' | 'height' | '
  return result.join('·');
 };

+export const getSalary = (
+  data: Pick<MaterialProfile, 'fullTimeMaxPrice' | 'fullTimeMinPrice' | 'partyTimeMaxPrice' | 'partyTimeMinPrice'>
+) => {
+  const { fullTimeMinPrice, fullTimeMaxPrice, partyTimeMinPrice, partyTimeMaxPrice } = data;
+  const prices: string[] = [];
+  if (fullTimeMinPrice && fullTimeMaxPrice) {
+    if (fullTimeMinPrice >= 50000) {
+      prices.push(`${fullTimeMinPrice / 1000}K以上/月`);
+    } else {
+      prices.push(`${fullTimeMinPrice / 1000}-${fullTimeMaxPrice / 1000}K/月`);
+    }
+  }
+  if (partyTimeMinPrice && partyTimeMaxPrice) {
+    if (partyTimeMinPrice >= 500) {
+      prices.push(`500以上/小时`);
+    } else {
+      prices.push(`${partyTimeMinPrice}-${partyTimeMaxPrice}/小时`);
+    }
+  }
+  return prices.filter(Boolean).join(' ');
+};
+
 export const chooseMedia = async (option: Taro.chooseMedia.Option = {}) => {
  try {
    const result = await Taro.chooseMedia({