feat: update of partner
This commit is contained in:
eleanor.mao
86
src/components/partner-invite-list/index.less
Normal file
86
src/components/partner-invite-list/index.less
Normal file
@ -0,0 +1,86 @@
|
||||
@import '@/styles/common.less';
|
||||
|
||||
.partner-invite-list {
|
||||
padding-top: 72px;
|
||||
&__title {
|
||||
height: 72px;
|
||||
width: 100%;
|
||||
background: #f7f7f7;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
line-height: 72px;
|
||||
font-size: 24px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
position: fixed;
|
||||
top: 98rpx;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
.flex-row();
|
||||
|
||||
&-time-id {
|
||||
padding: 0 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-created {
|
||||
padding: 0 8px;
|
||||
min-width: 96px;
|
||||
max-width: 196px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&-joined {
|
||||
text-align: right;
|
||||
width: 96px;
|
||||
padding: 0 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
height: 131px;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
font-size: 28px;
|
||||
|
||||
&-content {
|
||||
.flex-row();
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e6e7e8;
|
||||
}
|
||||
|
||||
&-time-id {
|
||||
padding-right: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
&-item {
|
||||
line-height: 40px;
|
||||
padding-bottom: 8px;
|
||||
.noWrap();
|
||||
}
|
||||
&-id {
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
color: #999999;
|
||||
.noWrap();
|
||||
}
|
||||
|
||||
&-created {
|
||||
padding: 0 8px;
|
||||
min-width: 96px;
|
||||
max-width: 196px;
|
||||
line-height: 83px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&-joined {
|
||||
width: 96px;
|
||||
text-align: right;
|
||||
line-height: 83px;
|
||||
padding-left: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
119
src/components/partner-invite-list/index.tsx
Normal file
119
src/components/partner-invite-list/index.tsx
Normal file
@ -0,0 +1,119 @@
|
||||
import { List, PullRefresh } from '@taroify/core';
|
||||
import classNames from 'classnames';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import ListPlaceholder from '@/components/list-placeholder';
|
||||
import { InviteUserInfo } from '@/types/partner';
|
||||
import { logWithPrefix } from '@/utils/common';
|
||||
import { formatTimestamp, formatUserId, getPartnerInviteList as requestData } from '@/utils/partner';
|
||||
|
||||
import './index.less';
|
||||
|
||||
const PREFIX = 'partner-invite-list';
|
||||
const log = logWithPrefix(PREFIX);
|
||||
|
||||
function PartnerList(props: {
|
||||
refreshDisabled?: boolean;
|
||||
visible?: boolean;
|
||||
listHeight?: number;
|
||||
className?: string;
|
||||
onListEmpty?: () => void;
|
||||
}) {
|
||||
const { className, listHeight, refreshDisabled, visible = true, onListEmpty } = props;
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [loadMoreError, setLoadMoreError] = useState(false);
|
||||
const [dataList, setDataList] = useState<InviteUserInfo[]>([]);
|
||||
const onListEmptyRef = useRef(onListEmpty);
|
||||
|
||||
const handleRefresh = useCallback(async () => {
|
||||
log('start pull refresh');
|
||||
try {
|
||||
setRefreshing(true);
|
||||
setLoadMoreError(false);
|
||||
const list = await requestData();
|
||||
setDataList(list);
|
||||
!list.length && onListEmptyRef.current?.();
|
||||
log('pull refresh success');
|
||||
} catch (e) {
|
||||
setDataList([]);
|
||||
setLoadMoreError(true);
|
||||
log('pull refresh failed');
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
onListEmptyRef.current = onListEmpty;
|
||||
}, [onListEmpty]);
|
||||
|
||||
// 初始化数据&配置变更后刷新数据
|
||||
useEffect(() => {
|
||||
// 列表不可见时，先不做处理
|
||||
if (!visible) {
|
||||
log('visible changed, but is not visible, only clear list');
|
||||
return;
|
||||
}
|
||||
|
||||
const refresh = async () => {
|
||||
log('visible changed, start refresh list data');
|
||||
try {
|
||||
setDataList([]);
|
||||
setLoadingMore(true);
|
||||
setLoadMoreError(false);
|
||||
const list = await requestData();
|
||||
setDataList(list);
|
||||
!list.length && onListEmptyRef.current?.();
|
||||
} catch (e) {
|
||||
setDataList([]);
|
||||
setLoadMoreError(true);
|
||||
} finally {
|
||||
log('visible changed, refresh list data end');
|
||||
setLoadingMore(false);
|
||||
}
|
||||
};
|
||||
refresh();
|
||||
}, [visible]);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__title`}>
|
||||
<div className={`${PREFIX}__title-time-id`}>邀请时间｜用户编号</div>
|
||||
<div className={`${PREFIX}__title-created`}>模卡</div>
|
||||
<div className={`${PREFIX}__title-joined`}>合伙人</div>
|
||||
</div>
|
||||
<PullRefresh
|
||||
className={classNames(`${PREFIX}__pull-refresh`, className)}
|
||||
loading={refreshing}
|
||||
onRefresh={handleRefresh}
|
||||
disabled={refreshDisabled}
|
||||
>
|
||||
<List
|
||||
hasMore={false}
|
||||
onLoad={() => {}}
|
||||
loading={loadingMore || refreshing}
|
||||
disabled={loadMoreError}
|
||||
fixedHeight={typeof listHeight !== 'undefined'}
|
||||
style={listHeight ? { height: `${listHeight}px` } : undefined}
|
||||
>
|
||||
{dataList.map(item => (
|
||||
<div className={`${PREFIX}__item`} key={item.id || item.userId}>
|
||||
<div className={`${PREFIX}__item-content`}>
|
||||
<div className={`${PREFIX}__item-time-id`}>
|
||||
<div className={`${PREFIX}__item-time`}>{formatTimestamp(item.created)}</div>
|
||||
<div className={`${PREFIX}__item-id`}>{formatUserId(item.userId)}</div>
|
||||
</div>
|
||||
<div className={`${PREFIX}__item-created`}>{item.isCreateResume ? '已创建' : '未创建'}</div>
|
||||
<div className={`${PREFIX}__item-joined`}>{item.isPartner ? '已加入' : '未加入'}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<ListPlaceholder hasMore={false} loadingMore={loadingMore} loadMoreError={loadMoreError} />
|
||||
</List>
|
||||
</PullRefresh>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PartnerList;
|
||||
Reference in New Issue
Block a user