magic-csb/boluo-app-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update material card

Browse Source
This commit is contained in:
chashaobao
2025-09-08 23:28:17 +08:00
parent f2e7fd9d85
commit b9cd0a3e6d
4 changed files with 89 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/material-card/index.tsx
View File

@ -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<MaterialProfile | null>(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) {
<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>
</ScrollView>
</div>
)}
{loading && <Loading />}
</div>