fix: avatar chose

pages/avatar/index.vue

@@ -149,7 +149,7 @@
 
 <script setup>
 import { ref, computed } from "vue";
-import { onShareAppMessage, onLoad } from "@dcloudio/uni-app";
+import { onShareAppMessage, onLoad, onReachBottom } from "@dcloudio/uni-app";
 import { getBavBarHeight, getDeviceInfo } from "@/utils/system";
 import { useUserStore } from "@/stores/user";
 import {
@@ -157,7 +157,12 @@ import {
   getShareReward,
   abilityCheck,
 } from "@/api/system.js";
-import { avatarDownloadRecord, getAvatarSystemList } from "@/api/avatar.js";
+import {
+  avatarDownloadRecord,
+  getAvatarSystemList,
+  getAvatarFrameList,
+  getAvatarDecorList,
+} from "@/api/avatar.js";
 
 const userStore = useUserStore();
 const loginPopupRef = ref(null);
@@ -165,16 +170,17 @@ const loginPopupRef = ref(null);
 const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
 
 const systemAvatars = ref([]);
-const frames = [
-  "https://file.lihailezzc.com/6.png",
-  "https://file.lihailezzc.com/7.png",
-  "https://file.lihailezzc.com/yunshi.png",
-  "https://file.lihailezzc.com/x_CURXRzG4wHF2dp_zu_r-removebg-preview.png",
-];
-const decors = [
-  "https://file.lihailezzc.com/6.png",
-  "https://file.lihailezzc.com/7.png",
-];
+const frames = ref([]);
+const decors = ref([]);
+
+// Pagination states
+const framePage = ref(1);
+const frameHasNext = ref(true);
+const frameLoading = ref(false);
+
+const decorPage = ref(1);
+const decorHasNext = ref(true);
+const decorLoading = ref(false);
 
 const currentAvatar = ref("");
 const selectedFrame = ref("");
@@ -188,15 +194,57 @@ const page = ref(1);
 const hasMore = ref(true);
 const loading = ref(false);
 
+const loadFrames = async () => {
+  if (frameLoading.value || !frameHasNext.value) return;
+  frameLoading.value = true;
+  try {
+    const res = await getAvatarFrameList(framePage.value);
+    const list = res?.list || [];
+    if (list.length > 0) {
+      frames.value.push(...list.map((item) => item.imageUrl));
+      framePage.value++;
+    }
+    if (typeof res.hasNext !== "undefined") {
+      frameHasNext.value = res.hasNext;
+    } else {
+      if (list.length < 10) frameHasNext.value = false;
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    frameLoading.value = false;
+  }
+};
+
+const loadDecors = async () => {
+  if (decorLoading.value || !decorHasNext.value) return;
+  decorLoading.value = true;
+  try {
+    const res = await getAvatarDecorList(decorPage.value);
+    const list = res?.list || [];
+    if (list.length > 0) {
+      decors.value.push(...list.map((item) => item.imageUrl));
+      decorPage.value++;
+    }
+    if (typeof res.hasNext !== "undefined") {
+      decorHasNext.value = res.hasNext;
+    } else {
+      if (list.length < 10) decorHasNext.value = false;
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    decorLoading.value = false;
+  }
+};
+
 const initSystemAvatars = async () => {
   try {
     const res = await getAvatarSystemList(1);
     const list = res?.list || [];
     if (list.length > 0) {
       // 取前3个展示在首页
-      systemAvatars.value = list
-        .slice(0, 3)
-        .map((item) => item.imageUrl);
+      systemAvatars.value = list.slice(0, 3).map((item) => item.imageUrl);
       // 默认选中第一个
       if (systemAvatars.value.length > 0) {
         currentAvatar.value = systemAvatars.value[0];
@@ -209,6 +257,16 @@ const initSystemAvatars = async () => {
 
 onLoad(() => {
   initSystemAvatars();
+  loadFrames();
+  loadDecors();
+});
+
+onReachBottom(() => {
+  if (activeTab.value === "frame") {
+    loadFrames();
+  } else if (activeTab.value === "decor") {
+    loadDecors();
+  }
 });
 
 const openMorePopup = () => {