|
@@ -17,32 +17,26 @@ import { useAgentStore } from "@/store/agentStore";
|
|
import Taro from "@tarojs/taro";
|
|
import Taro from "@tarojs/taro";
|
|
import { isSuccess } from "@/utils";
|
|
import { isSuccess } from "@/utils";
|
|
import IconDeleteGray16 from "@/components/icon/IconDeleteGray16";
|
|
import IconDeleteGray16 from "@/components/icon/IconDeleteGray16";
|
|
-import { useLoadMore } from "@/utils/loadMore";
|
|
|
|
import EmptyData from "@/components/empty-data";
|
|
import EmptyData from "@/components/empty-data";
|
|
import { useModalStore } from "@/store/modalStore";
|
|
import { useModalStore } from "@/store/modalStore";
|
|
-
|
|
|
|
|
|
+import { useLoadMoreInfinite, createKey } from "@/utils/loadMoreInfinite";
|
|
|
|
|
|
export default function Index() {
|
|
export default function Index() {
|
|
const { agent, fetchAgent } = useAgentStore();
|
|
const { agent, fetchAgent } = useAgentStore();
|
|
- const [list, setList] = useState<(TAvatarItem | TAvatarItem & { deletedTmp: boolean })[]>([]);
|
|
|
|
const [scrollTop, setScrollTop] = useState(0);
|
|
const [scrollTop, setScrollTop] = useState(0);
|
|
const scrollPositionRef = useRef(0);
|
|
const scrollPositionRef = useRef(0);
|
|
|
|
|
|
const { showModal } = useModalStore()
|
|
const { showModal } = useModalStore()
|
|
|
|
|
|
- const fetcher = async ([_url, _nextId, page, pageSize]) => {
|
|
|
|
- const res = await fetchMyAvatars({ pageIndex: page, pageSize });
|
|
|
|
|
|
+ const fetcher = async ([_url, {pageIndex, pageSize}]) => {
|
|
|
|
+ const res = await fetchMyAvatars({ pageIndex, pageSize });
|
|
return res.data;
|
|
return res.data;
|
|
};
|
|
};
|
|
|
|
|
|
- const { data, loadMore, refetch } = useLoadMore<TAvatarItem[]>({
|
|
|
|
- url: 'fetchMyAvatars',
|
|
|
|
- fetcher,
|
|
|
|
- });
|
|
|
|
|
|
+ const { list, loadMore, mutate } = useLoadMoreInfinite<TAvatarItem[]>(createKey('fetchMyAvatars'), fetcher);
|
|
|
|
|
|
const [current, setCurrent] = useState<TAvatarItem | null>(null);
|
|
const [current, setCurrent] = useState<TAvatarItem | null>(null);
|
|
|
|
|
|
-
|
|
|
|
const handleClick = async (item: TAvatarItem) => {
|
|
const handleClick = async (item: TAvatarItem) => {
|
|
console.log(item);
|
|
console.log(item);
|
|
if (!agent?.agentId) {
|
|
if (!agent?.agentId) {
|
|
@@ -77,28 +71,13 @@ export default function Index() {
|
|
async onConfirm() {
|
|
async onConfirm() {
|
|
const response = await deleteAvatar(avatar.avatarId)
|
|
const response = await deleteAvatar(avatar.avatarId)
|
|
if(isSuccess(response.status)){
|
|
if(isSuccess(response.status)){
|
|
-
|
|
|
|
- // todo: 如何解决闪动问题? 直接操作 DOM 隐藏或删除?
|
|
|
|
- setList(prevList => {
|
|
|
|
- return prevList.map(item =>
|
|
|
|
- item.avatarId === avatar.avatarId ? { ...item, deletedTmp: true } : item
|
|
|
|
- );
|
|
|
|
- })
|
|
|
|
- setTimeout(()=> {
|
|
|
|
- setScrollTop(scrollPositionRef.current)
|
|
|
|
- }, 100)
|
|
|
|
-
|
|
|
|
|
|
+ mutate()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- useEffect(() => {
|
|
|
|
- if (data?.data) {
|
|
|
|
- setList([...list, ...data.data]);
|
|
|
|
- }
|
|
|
|
- }, [data]);
|
|
|
|
|
|
|
|
const renderList = ()=> {
|
|
const renderList = ()=> {
|
|
if(!list.length){
|
|
if(!list.length){
|
|
@@ -108,19 +87,20 @@ export default function Index() {
|
|
}
|
|
}
|
|
|
|
|
|
return list.map((avatar) => {
|
|
return list.map((avatar) => {
|
|
|
|
+ const isCurrent = agent?.avatarUrl === avatar.avatarUrl;
|
|
return (
|
|
return (
|
|
<View
|
|
<View
|
|
className={
|
|
className={
|
|
- `${current?.avatarUrl === avatar.avatarUrl
|
|
|
|
|
|
+ `${isCurrent
|
|
? style.gridItemActived
|
|
? style.gridItemActived
|
|
- : style.gridItem} ${avatar?.deletedTmp ? style.deleted:''}`
|
|
|
|
|
|
+ : style.gridItem}`
|
|
|
|
|
|
}
|
|
}
|
|
onClick={() => handleClick(avatar)}
|
|
onClick={() => handleClick(avatar)}
|
|
>
|
|
>
|
|
- <View className={style.deleteButton} onClick={(e)=> handleDelete(e, avatar)}>
|
|
|
|
|
|
+ {!isCurrent && <View className={style.deleteButton} onClick={(e)=> handleDelete(e, avatar)}>
|
|
<IconDeleteGray16/>
|
|
<IconDeleteGray16/>
|
|
- </View>
|
|
|
|
|
|
+ </View>}
|
|
<Image
|
|
<Image
|
|
src={avatar.avatarUrl}
|
|
src={avatar.avatarUrl}
|
|
mode="widthFix"
|
|
mode="widthFix"
|
|
@@ -135,7 +115,7 @@ export default function Index() {
|
|
|
|
|
|
return (
|
|
return (
|
|
<PageCustom>
|
|
<PageCustom>
|
|
- <NavBarNormal backText="历史形象"></NavBarNormal>
|
|
|
|
|
|
+ <NavBarNormal>历史形象</NavBarNormal>
|
|
<View className={style.container}>
|
|
<View className={style.container}>
|
|
<ScrollView
|
|
<ScrollView
|
|
scrollY
|
|
scrollY
|