fix: avatar chose

pages/avatar/index.vue

@@ -40,6 +40,10 @@
     <view class="section">
       <view class="section-header">
         <text class="section-title">选择底图</text>
+        <view class="more-btn" @tap="openMorePopup">
+          <text>查看更多</text>
+          <text class="arrow">›</text>
+        </view>
       </view>
       <scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
         <view class="avatar-list">
@@ -110,6 +114,36 @@
 
     <!-- Login Popup -->
     <LoginPopup ref="loginPopupRef" @logind="handleLogind" />
+
+    <!-- More Avatar Popup -->
+    <uni-popup ref="morePopup" type="bottom" background-color="#fff">
+      <view class="popup-content">
+        <view class="popup-header">
+          <text class="popup-title">选择头像</text>
+          <view class="close-btn" @tap="closeMorePopup">✕</view>
+        </view>
+        <scroll-view
+          scroll-y
+          class="popup-scroll"
+          @scrolltolower="loadMoreAvatars"
+        >
+          <view class="popup-grid">
+            <view
+              v-for="(item, i) in moreAvatars"
+              :key="i"
+              class="popup-item"
+              @tap="selectMoreAvatar(item)"
+            >
+              <image :src="item" class="popup-img" mode="aspectFill" />
+            </view>
+          </view>
+          <view v-if="loading" class="loading-text">加载中...</view>
+          <view v-if="!hasMore && moreAvatars.length > 0" class="no-more-text">
+            没有更多了
+          </view>
+        </scroll-view>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
@@ -151,6 +185,58 @@ const selectedFrame = ref("");
 const selectedDecor = ref("");
 const activeTab = ref("frame");
 
+// More Popup logic
+const morePopup = ref(null);
+const moreAvatars = ref([]);
+const page = ref(1);
+const hasMore = ref(true);
+const loading = ref(false);
+
+const openMorePopup = () => {
+  morePopup.value.open();
+  if (moreAvatars.value.length === 0) {
+    loadMoreAvatars();
+  }
+};
+
+const closeMorePopup = () => {
+  morePopup.value.close();
+};
+
+const loadMoreAvatars = async () => {
+  if (loading.value || !hasMore.value) return;
+  loading.value = true;
+  try {
+    const res = await getAvatarSystemList(page.value);
+    const list = res?.list || [];
+
+    if (list.length > 0) {
+      const newAvatars = list.map((item) => item.imageUrl);
+      moreAvatars.value.push(...newAvatars);
+      page.value++;
+    }
+
+    // 根据接口返回的 hasNext 字段判断是否还有更多数据
+    // 如果接口没有返回 hasNext，则降级使用列表长度判断（假设每页10条）
+    if (typeof res.hasNext !== "undefined") {
+      hasMore.value = res.hasNext;
+    } else {
+      if (list.length < 10) {
+        hasMore.value = false;
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+const selectMoreAvatar = (url) => {
+  currentAvatar.value = url;
+  closeMorePopup();
+};
+
 const toggleFrame = (frame) => {
   if (selectedFrame.value === frame) {
     selectedFrame.value = "";
@@ -598,4 +684,77 @@ const loadImage = (url) => {
   left: -9999px;
   top: -9999px;
 }
+
+/* More Popup Styles */
+.more-btn {
+  margin-left: auto;
+  font-size: 24rpx;
+  color: #999;
+  display: flex;
+  align-items: center;
+}
+.arrow {
+  font-size: 32rpx;
+  margin-left: 4rpx;
+  line-height: 1;
+  position: relative;
+  top: -2rpx;
+}
+
+.popup-content {
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  height: 60vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.popup-header {
+  padding: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-bottom: 2rpx solid #f5f5f5;
+}
+.popup-title {
+  font-size: 32rpx;
+  font-weight: 600;
+}
+.close-btn {
+  position: absolute;
+  right: 32rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 32rpx;
+  color: #999;
+  padding: 10rpx;
+}
+.popup-scroll {
+  flex: 1;
+  height: 0;
+}
+.popup-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+  padding: 24rpx;
+}
+.popup-item {
+  aspect-ratio: 1;
+  border-radius: 16rpx;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+.popup-img {
+  width: 100%;
+  height: 100%;
+}
+.loading-text,
+.no-more-text {
+  text-align: center;
+  padding: 24rpx;
+  color: #999;
+  font-size: 24rpx;
+}
 </style>