From b9cd0a3e6d7cb931fad344afe1a6e20789361f04 Mon Sep 17 00:00:00 2001 From: chashaobao Date: Mon, 8 Sep 2025 23:28:17 +0800 Subject: [PATCH] feat: update material card --- src/components/anchor-card/index.tsx | 13 +---- src/components/material-card/index.less | 72 ++++++++++++++----------- src/components/material-card/index.tsx | 48 +++++++++-------- src/utils/material.ts | 22 ++++++++ 4 files changed, 89 insertions(+), 66 deletions(-) diff --git a/src/components/anchor-card/index.tsx b/src/components/anchor-card/index.tsx index 920393a..6e92952 100644 --- 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; diff --git a/src/components/material-card/index.less b/src/components/material-card/index.less index 7b9c603..8068447 100644 --- 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%; - height: 100%; - .flex-row(); - &::-webkit-scrollbar { - display: none; + &-left { + width: 125px; + height: 160px; } - - &::after { - content: ''; - position: absolute; - right: 0; - width: 102px; + &-cover { + width: 100%; height: 100%; - background: linear-gradient(91.41deg, rgba(255, 255, 255, 0) 1.86%, #FFFFFF 99.47%); + border-radius: 12px; + } + &-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; + } + .salary { + font-weight: 500; + font-size: 24px; + line-height: 36px; + color: @blColor; + + } } } - - &__cover-list { - height: 100%; - .flex-row(); - } - - &__cover-image { - width: 120px; - height: 100%; - margin-right: 24px; - // 不知道为啥高度不对，可能 scroll-view 默认底部是滚动条高度？ - margin-top: 38px; - border-radius: 8px; - } - -} \ No newline at end of file +} diff --git a/src/components/material-card/index.tsx b/src/components/material-card/index.tsx index 7003376..cb8aef1 100644 --- 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'; @@ -34,8 +35,9 @@ function MaterialCard(props: IProps) { const userInfo = useUserInfo(); const [loading, setLoading] = useState(true); const [profile, setProfile] = useState(null); - const refreshRef = useRef((_f?: boolean) => { }); + 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) {
我的模卡
- {/* {profile && ( -
{`完成度${Math.min((profile.progressBar || 0) * 100, 100)}%`}
- )} */}
{profile && (
- {/*
{profile?.isOpen ? '开放中' : '关闭'}
*/} - +
查看
+
)}
@@ -123,18 +122,21 @@ function MaterialCard(props: IProps) { )} {!loading && hasMaterial && ( - -
- {sortVideos(profile?.materialVideoInfoList || []).map(video => ( - - ))} +
+ {firstCover && ( +
+ +
+ )} +
+
{profile?.name}
+
+ {WORK_YEAR_LABELS[profile?.workedYear] || ''}·{getBasicInfo({ ...profile, shoeSize: null })} +
+
播过 {profile?.workedSecCategoryStr}
+
{getSalary(profile)}
- +
)} {loading && }
diff --git a/src/utils/material.ts b/src/utils/material.ts index 01c779a..140225a 100644 --- a/src/utils/material.ts +++ b/src/utils/material.ts @@ -62,6 +62,28 @@ export const getBasicInfo = (profile: Pick +) => { + 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({