fix: index

pages/avatar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
+  <view class="avatar-page">
     <NavBar title="头像制作" />
 
     <!-- 顶部步骤条 -->
@@ -15,9 +15,7 @@
           <view class="step-num-wrap">
             <view class="step-line" v-if="idx > 0"></view>
             <view class="step-num">
-              <text v-if="activeTool === tool.type && showPanel">{{
+              <text v-if="activeTool === tool.type">{{ tool.icon }}</text>
-                tool.icon
-              }}</text>
               <text v-else>{{ tool.step }}</text>
             </view>
           </view>
@@ -63,108 +61,73 @@
       <button class="btn primary" open-type="share">分享给朋友</button>
     </view>
 
-    <!-- 弹出编辑面板 -->
+    <!-- 资源选择区 -->
-    <view class="panel-container" :class="{ show: showPanel }">
+    <view class="resource-selector">
-      <view class="panel-mask" @tap="closePanel"></view>
-      <view class="panel-content">
-        <view class="panel-handle" @tap="closePanel"></view>
-
       <!-- 头像选择区 -->
       <view v-if="activeTool === 'avatar'" class="section">
         <view class="section-title">选择头像</view>
-          <scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
+        <view class="grid">
-            <view class="avatar-list">
+          <view class="grid-item upload-card">
-              <view class="avatar-card upload-card">
             <button
               class="wechat-avatar-btn"
               open-type="chooseAvatar"
               @chooseavatar="onChooseAvatar"
             >
-                  <view class="upload-icon">📷</view>
+              <view class="upload-icon">✨</view>
               <text class="upload-text">微信头像</text>
             </button>
           </view>
           <view
-                v-for="(item, i) in systemAvatars"
+            v-for="item in systemAvatars"
-                :key="i"
+            :key="item.id"
-                class="avatar-card"
+            class="grid-item"
             :class="{ active: currentAvatar?.id === item.id }"
             @tap="currentAvatar = item"
           >
-                <image
+            <image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
-                  :src="item.imageUrl"
+            <view v-if="currentAvatar?.id === item.id" class="check">✓</view>
-                  class="avatar-thumb"
-                  mode="aspectFill"
-                />
-                <view v-if="currentAvatar?.id === item.id" class="check"
-                  >✔</view
-                >
-              </view>
-              <view class="avatar-card more-card" @tap="openMorePopup">
-                <view class="upload-icon">🔍</view>
-                <text class="upload-text">更多</text>
           </view>
         </view>
-          </scroll-view>
+        <view v-if="avatarLoading" class="loading-more">加载中...</view>
+        <view v-if="!avatarHasNext" class="no-more">没有更多了</view>
       </view>
 
       <!-- 头像框选择区 -->
       <view v-if="activeTool === 'frame'" class="section">
         <view class="section-title">选择头像框</view>
-          <scroll-view scroll-y class="panel-grid-scroll">
         <view class="grid">
           <view
-                v-for="(frame, i) in frames"
+            v-for="item in frames"
-                :key="i"
+            :key="item.id"
             class="grid-item"
-                :class="{ active: selectedFrame?.id === frame.id }"
+            :class="{ active: selectedFrame?.id === item.id }"
-                @tap="toggleFrame(frame)"
+            @tap="toggleFrame(item)"
-              >
-                <image
-                  :src="frame.imageUrl"
-                  class="grid-img"
-                  mode="aspectFill"
-                />
-                <view v-if="selectedFrame?.id === frame.id" class="check"
-                  >✔</view
           >
+            <image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
+            <view v-if="selectedFrame?.id === item.id" class="check">✓</view>
           </view>
         </view>
         <view v-if="frameLoading" class="loading-more">加载中...</view>
-            <view v-else-if="!frameHasNext && frames.length > 0" class="no-more"
+        <view v-if="!frameHasNext" class="no-more">没有更多了</view>
-              >没有更多了</view
-            >
-          </scroll-view>
       </view>
 
       <!-- 挂饰选择区 -->
       <view v-if="activeTool === 'decor'" class="section">
-          <view class="section-title">选择挂饰配件</view>
+        <view class="section-title">选择挂饰</view>
-          <scroll-view scroll-y class="panel-grid-scroll">
         <view class="grid">
           <view
-                v-for="(decor, i) in decors"
+            v-for="item in decors"
-                :key="i"
+            :key="item.id"
             class="grid-item"
-                :class="{ active: selectedDecor?.id === decor.id }"
+            :class="{ active: selectedDecor?.id === item.id }"
-                @tap="toggleDecor(decor)"
+            @tap="toggleDecor(item)"
-              >
-                <image
-                  :src="decor.imageUrl"
-                  class="grid-img"
-                  mode="aspectFit"
-                />
-                <view v-if="selectedDecor?.id === decor.id" class="check"
-                  >✔</view
           >
+            <image :src="item.imageUrl" class="grid-img" mode="aspectFill" />
+            <view v-if="selectedDecor?.id === item.id" class="check">✓</view>
           </view>
         </view>
         <view v-if="decorLoading" class="loading-more">加载中...</view>
-            <view v-else-if="!decorHasNext && decors.length > 0" class="no-more"
+        <view v-if="!decorHasNext" class="no-more">没有更多了</view>
-              >没有更多了</view
-            >
-          </scroll-view>
-        </view>
       </view>
     </view>
 
@@ -245,7 +208,6 @@ const frames = ref([]);
 const decors = ref([]);
 
 // Panel and steps logic
-const showPanel = ref(false);
 const activeTool = ref("avatar");
 const tools = [
   { step: "01", text: "头像", type: "avatar", icon: "👤" },
@@ -255,14 +217,13 @@ const tools = [
 
 const openTool = (type) => {
   activeTool.value = type;
-  showPanel.value = true;
-};
-
-const closePanel = () => {
-  showPanel.value = false;
 };
 
 // Pagination states
+const avatarPage = ref(1);
+const avatarHasNext = ref(true);
+const avatarLoading = ref(false);
+
 const framePage = ref(1);
 const frameHasNext = ref(true);
 const frameLoading = ref(false);
@@ -278,9 +239,37 @@ const selectedDecor = ref(null);
 // More Popup logic
 const morePopup = ref(null);
 const moreAvatars = ref([]);
-const page = ref(1);
+
-const hasMore = ref(true);
+const loadAvatars = async () => {
-const loading = ref(false);
+  if (avatarLoading.value || !avatarHasNext.value) return;
+  avatarLoading.value = true;
+  try {
+    const res = await getAvatarSystemList(avatarPage.value);
+    const list = res?.list || [];
+    if (list.length > 0) {
+      systemAvatars.value.push(
+        ...list.map((item) => ({
+          id: item.id,
+          imageUrl: item.imageUrl,
+        })),
+      );
+      avatarPage.value++;
+      // 默认选中第一个
+      if (systemAvatars.value.length > 0 && !currentAvatar.value) {
+        currentAvatar.value = systemAvatars.value[0];
+      }
+    }
+    if (typeof res.hasNext !== "undefined") {
+      avatarHasNext.value = res.hasNext;
+    } else {
+      if (list.length < 10) avatarHasNext.value = false;
+    }
+  } catch (e) {
+    console.error("Failed to load avatars:", e);
+  } finally {
+    avatarLoading.value = false;
+  }
+};
 
 const loadFrames = async () => {
   if (frameLoading.value || !frameHasNext.value) return;
@@ -336,27 +325,8 @@ const loadDecors = async () => {
   }
 };
 
-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) => ({ id: item.id, imageUrl: item.imageUrl }));
-      // 默认选中第一个
-      if (systemAvatars.value.length > 0 && !currentAvatar.value) {
-        currentAvatar.value = systemAvatars.value[0];
-      }
-    }
-  } catch (e) {
-    console.error("Failed to load system avatars:", e);
-  }
-};
-
 onLoad((options) => {
-  initSystemAvatars();
+  loadAvatars();
   loadFrames();
   loadDecors();
 
@@ -370,11 +340,9 @@ onLoad((options) => {
     if (options.type === "frame") {
       activeTool.value = "frame";
       selectedFrame.value = recommendItem;
-      showPanel.value = true;
     } else if (options.type === "decor") {
       activeTool.value = "decor";
       selectedDecor.value = recommendItem;
-      showPanel.value = true;
     } else if (options.type === "avatar") {
       currentAvatar.value = recommendItem;
     }
@@ -382,71 +350,17 @@ onLoad((options) => {
 });
 
 onReachBottom(() => {
-  if (showPanel.value) {
+  if (activeTool.value === "avatar") {
-    if (activeTool.value === "frame") {
+    loadAvatars();
+  } else if (activeTool.value === "frame") {
     loadFrames();
   } else if (activeTool.value === "decor") {
     loadDecors();
   }
-  }
 });
 
-const openMorePopup = () => {
+const goBack = () => {
-  morePopup.value.open();
+  uni.navigateBack();
-  if (moreAvatars.value.length === 0) {
-    // 重新加载第一页，因为 systemAvatars 只取了前3个，
-    // 这里我们简单处理：重新请求第一页作为更多列表的开始
-    // 或者你可以复用 systemAvatars 的数据，然后 page 从 2 开始请求
-    // 为了逻辑简单和数据一致性，这里选择重新请求第一页填充更多列表
-    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) => ({
-        id: item.id,
-        imageUrl: 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 createAvatarId = () => {
-  const id = generateObjectId();
-  // avatarCreateComplete({ id });
-  return id;
-};
-
-const selectMoreAvatar = (item) => {
-  currentAvatar.value = item;
-  closeMorePopup();
 };
 
 const toggleFrame = (frame) => {
@@ -564,19 +478,9 @@ const onChooseAvatar = async (e) => {
   }
 };
 
-const useWeChatAvatar = () => {
+const createAvatarId = () => {
-  if (!isLoggedIn.value) {
+  const id = generateObjectId();
-    loginPopupRef.value.open();
+  return id;
-  } else {
-    currentAvatar.value = {
-      id: "wechat_" + Date.now(),
-      imageUrl: userStore.userInfo.avatarUrl,
-    };
-  }
-};
-
-const goBack = () => {
-  uni.navigateBack();
 };
 
 const saveByCanvas = async (save = true) => {
@@ -776,9 +680,6 @@ onShareAppMessage(async () => {
   }
   uni.showLoading({ title: "分享中...", mask: true });
   const id = createAvatarId();
-  // const shareTokenRes = {
-  //   shareToken: "iFmK8WjRm6TK",
-  // };
   const shareTokenRes = await getShareToken("avatar_download", id);
   const imageUrl = await completeCardInfo(id);
   uni.hideLoading();
@@ -796,16 +697,6 @@ onShareAppMessage(async () => {
 //       "https://file.lihailezzc.com/resource/b48c41054c2633c478463ac1b1f1ca23.png",
 //   };
 // });
-
-const loadImage = (url) => {
-  return new Promise((resolve, reject) => {
-    uni.getImageInfo({
-      src: url,
-      success: (res) => resolve(res.path),
-      fail: reject,
-    });
-  });
-};
 </script>
 
 <style lang="scss" scoped>
@@ -982,147 +873,28 @@ const loadImage = (url) => {
   }
 }
 
-/* 编辑面板样式 */
+.resource-selector {
-.panel-container {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  z-index: 1000;
-  visibility: hidden;
-  transition: all 0.3s;
-
-  &.show {
-    visibility: visible;
-    .panel-mask {
-      opacity: 1;
-    }
-    .panel-content {
-      transform: translateY(0);
-    }
-  }
-
-  .panel-mask {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.4);
-    opacity: 0;
-    transition: opacity 0.3s;
-  }
-
-  .panel-content {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
   background: #fff;
-    border-radius: 40rpx 40rpx 0 0;
+  margin: 0 30rpx 30rpx;
   padding: 30rpx;
-    transform: translateY(100%);
+  border-radius: 32rpx;
-    transition: transform 0.3s;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
-    max-height: 70vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .panel-handle {
-    width: 80rpx;
-    height: 8rpx;
-    background: #eee;
-    border-radius: 4rpx;
-    margin: 0 auto 30rpx;
-  }
 
   .section-title {
-    font-size: 32rpx;
+    font-size: 30rpx;
     font-weight: bold;
-    margin-bottom: 30rpx;
+    margin-bottom: 24rpx;
     color: #333;
-  }
+    display: flex;
+    align-items: center;
 
-  .panel-grid-scroll {
+    &::before {
-    flex: 1;
+      content: "";
-    overflow: hidden;
+      width: 8rpx;
-  }
+      height: 32rpx;
-}
-
-.avatar-scroll {
-  white-space: nowrap;
-  width: 100%;
-
-  .avatar-list {
-    display: inline-flex;
-    padding: 10rpx 0;
-    gap: 20rpx;
-  }
-
-  .avatar-card {
-    width: 120rpx;
-    height: 120rpx;
-    border-radius: 20rpx;
-    overflow: hidden;
-    position: relative;
-    border: 4rpx solid transparent;
-    background: #f5f5f5;
-
-    &.active {
-      border-color: #ff3b30;
-    }
-
-    .avatar-thumb {
-      width: 100%;
-      height: 100%;
-    }
-
-    .check {
-      position: absolute;
-      top: 0;
-      right: 0;
       background: #ff3b30;
-      color: #fff;
+      border-radius: 4rpx;
-      font-size: 20rpx;
+      margin-right: 16rpx;
-      padding: 4rpx 8rpx;
-      border-radius: 0 0 0 16rpx;
-    }
-
-    &.upload-card,
-    &.more-card {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      background: #fdf2f2;
-      border: 2rpx dashed #ffcbcb;
-
-      .wechat-avatar-btn {
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        background: transparent;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        line-height: 1.2;
-
-        &::after {
-          border: none;
-        }
-      }
-
-      .upload-icon {
-        font-size: 40rpx;
-        margin-bottom: 8rpx;
-      }
-
-      .upload-text {
-        font-size: 20rpx;
-        color: #ff3b30;
-      }
     }
   }
 }
@@ -1159,6 +931,41 @@ const loadImage = (url) => {
       padding: 4rpx 8rpx;
       border-radius: 0 0 0 16rpx;
     }
+
+    &.upload-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: #fdf2f2;
+      border: 2rpx dashed #ffcbcb;
+
+      .wechat-avatar-btn {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        background: transparent;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        line-height: 1.2;
+
+        &::after {
+          border: none;
+        }
+      }
+
+      .upload-icon {
+        font-size: 40rpx;
+        margin-bottom: 8rpx;
+      }
+
+      .upload-text {
+        font-size: 20rpx;
+        color: #ff3b30;
+      }
+    }
   }
 }
 
@@ -1175,61 +982,5 @@ const loadImage = (url) => {
   left: -9999px;
   top: -9999px;
 }
-
-/* 更多弹窗样式保持不变 */
-.popup-content {
-  background: #fff;
-  border-radius: 32rpx 32rpx 0 0;
-  padding: 30rpx;
-  max-height: 80vh;
-
-  .popup-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 30rpx;
-
-    .popup-title {
-      font-size: 32rpx;
-      font-weight: bold;
-    }
-
-    .close-btn {
-      font-size: 40rpx;
-      color: #999;
-      padding: 10rpx;
-    }
-  }
-
-  .popup-scroll {
-    height: 60vh;
-  }
-
-  .popup-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20rpx;
-  }
-
-  .popup-item {
-    aspect-ratio: 1;
-    border-radius: 20rpx;
-    overflow: hidden;
-    background: #f5f5f5;
-
-    .popup-img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .loading-text,
-  .no-more-text {
-    text-align: center;
-    font-size: 24rpx;
-    color: #999;
-    padding: 30rpx 0;
-  }
-}
 </style>
 "}]} ```