feat

src/pages.json

@@ -33,13 +33,29 @@
         "navigationBarTitleText": "我的",
         "navigationStyle": "custom"
       }
-    },
+    }
+  ],
+  "subPackages": [
     {
-      "path": "pages/detail/detail",
-      "style": {
-        "navigationBarTitleText": "详情",
-        "navigationStyle": "custom"
-      }
+      "root": "pages/home",
+      "pages": [
+        {
+          "path": "address-change",
+          "style": {
+            "navigationBarTitleText": "城市",
+            "navigationStyle": "default",
+            "navigationBarBackgroundColor": "#222222",
+            "navigationBarTextStyle": "white"
+          }
+        },
+        {
+          "path": "detail",
+          "style": {
+            "navigationBarTitleText": "详情",
+            "navigationStyle": "custom"
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {

src/pages/home/address-change.vue

@@ -0,0 +1,5 @@
+<template>1</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/pages/home/detail.vue

@@ -15,7 +15,18 @@
     </template>
   </uni-nav-bar>
 
-  <scroll-view class="page" scroll-y @scroll="onScroll">
+  <scroll-view
+    class="page"
+    scroll-y
+    refresher-enabled
+    refresher-background="#222"
+    :refresher-triggered="refresherTriggered"
+    :refresher-threshold="100"
+    @refresherrefresh="onRefresherRefresh"
+    @refresherabort="onRefresherAbort"
+    @scrolltolower="onScrollToLower"
+    @scroll="onScroll"
+  >
     <view class="image" style="background-image: url(http://dummyimage.com/100x100/ac0ee3)">
       <view class="info">
         <image class="avatar" src="" />
@@ -54,13 +65,28 @@
         </view>
       </view>
     </view>
-    <moment v-for="(item, index) in 100">{{ index }}</moment>
+    <moment v-for="(item, index) in listData">{{ index }}</moment>
+    <uni-load-more :status="loadMoreStatus" :content-text="loadMoreContent" @clickLoadMore="onClickLoadMore" />
+    <view style="height: 100rpx"></view>
   </scroll-view>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import moment from "@/sheep/components/moment/moment.vue";
+import makeFriendApi from "@/sheep/api/make-friend";
+import useScroll from "@/sheep/hooks/use-scroll";
+
+const {
+  listData,
+  refresherTriggered,
+  loadMoreContent,
+  loadMoreStatus,
+  onRefresherRefresh,
+  onRefresherAbort,
+  onScrollToLower,
+  onClickLoadMore,
+} = useScroll(makeFriendApi.getMakeFriendList);
 
 const scrollTop = ref(0);
 
@@ -90,7 +116,6 @@ function back() {
 }
 
 function onScroll(e: any) {
-  console.log(e);
   scrollTop.value = e.detail.scrollTop;
 }
 </script>

src/pages/home/home.vue

@@ -14,9 +14,9 @@
       <segmented v-model="current" :items="segmentedItems"></segmented>
     </view>
     <template v-slot:left>
-      <view class="location">
+      <view class="location" @click="selectAddress">
         <uni-icons type="location" size="24" color="#ffcd32"></uni-icons>
-        <text>金华市</text>
+        <text>{{}}</text>
       </view>
     </template>
     <template v-slot:right></template>
@@ -32,7 +32,6 @@
     @refresherrefresh="onRefresherRefresh"
     @refresherabort="onRefresherAbort"
     @scrolltolower="onScrollToLower"
-    @scroll="onScroll"
   >
     <view class="user-card" v-for="user in listData" :key="user.id" @click="detail">
       <image class="user-image" :src="user.avatar" />
@@ -78,13 +77,15 @@ const {
 const current = ref(0);
 const segmentedItems = ["广场", "最近", "新人"];
 
-const onScroll = (e: any) => {
-  // console.log('滚动:', e.detail);
+const selectAddress = () => {
+  uni.navigateTo({
+    url: "/pages/home/address-change",
+  });
 };
 
 const detail = () => {
   uni.navigateTo({
-    url: "/pages/detail/detail",
+    url: "/pages/home/detail",
   });
 };
 </script>

src/pages/messages/messages.vue

@@ -12,7 +12,7 @@
     </view>
 
     <scroll-view class="chat-list" scroll-y>
-      <view class="chat-item" v-for="message in messageList" :key="message.id">
+      <view class="chat-item" v-for="message in 10" :key="message.id">
         <uni-badge size="small" text="100" absolute="rightTop" :offset="[10, 10]" :custom-style="{ borderColor: 'red' }">
           <image :src="message.avatar" class="avatar" />
         </uni-badge>
@@ -43,104 +43,7 @@ interface Message {
   unread: number;
 }
 
-const messageList = ref<Message[]>([
-  {
-    id: 1,
-    username: "晨晨",
-    avatar: "/static/avatar1.jpg",
-    lastMessage: "你好，很高兴认识你！",
-    time: "10:30",
-    unread: 2,
-  },
-  {
-    id: 2,
-    username: "艾伯特",
-    avatar: "/static/avatar2.jpg",
-    lastMessage: "今天天气不错呢",
-    time: "09:15",
-    unread: 0,
-  },
-  {
-    id: 3,
-    username: "粒儿云",
-    avatar: "/static/avatar3.jpg",
-    lastMessage: "晚上一起吃饭吗？",
-    time: "昨天",
-    unread: 1,
-  },
-  {
-    id: 4,
-    username: "蓝天",
-    avatar: "/static/avatar4.jpg",
-    lastMessage: "周末有什么安排？",
-    time: "昨天",
-    unread: 0,
-  },
-  {
-    id: 1,
-    username: "晨晨",
-    avatar: "/static/avatar1.jpg",
-    lastMessage: "你好，很高兴认识你！",
-    time: "10:30",
-    unread: 2,
-  },
-  {
-    id: 2,
-    username: "艾伯特",
-    avatar: "/static/avatar2.jpg",
-    lastMessage: "今天天气不错呢",
-    time: "09:15",
-    unread: 0,
-  },
-  {
-    id: 3,
-    username: "粒儿云",
-    avatar: "/static/avatar3.jpg",
-    lastMessage: "晚上一起吃饭吗？",
-    time: "昨天",
-    unread: 1,
-  },
-  {
-    id: 4,
-    username: "蓝天",
-    avatar: "/static/avatar4.jpg",
-    lastMessage: "周末有什么安排？",
-    time: "昨天",
-    unread: 0,
-  },
-  {
-    id: 1,
-    username: "晨晨",
-    avatar: "/static/avatar1.jpg",
-    lastMessage: "你好，很高兴认识你！",
-    time: "10:30",
-    unread: 2,
-  },
-  {
-    id: 2,
-    username: "艾伯特",
-    avatar: "/static/avatar2.jpg",
-    lastMessage: "今天天气不错呢",
-    time: "09:15",
-    unread: 0,
-  },
-  {
-    id: 3,
-    username: "粒儿云",
-    avatar: "/static/avatar3.jpg",
-    lastMessage: "晚上一起吃饭吗？",
-    time: "昨天",
-    unread: 1,
-  },
-  {
-    id: 4,
-    username: "蓝天",
-    avatar: "/static/avatar4.jpg",
-    lastMessage: "周末有什么安排？",
-    time: "昨天",
-    unread: 0,
-  },
-]);
+const messageList = ref<Message[]>();
 
 const unreadCount = computed(() => {
   return messageList.value.reduce((total, message) => total + message.unread, 0);

src/pages/moments/moments.vue

@@ -1,251 +1,83 @@
 <template>
-  <view class="moments-page">
-    <view class="header">
-      <segmented class="segmented" v-model="current" :items="segmentedItems"></segmented>
-      <view class="camera">
-        <uni-icons type="camera" size="24" color="#ffcd32"></uni-icons>
-      </view>
+  <view class="header">
+    <segmented class="segmented" v-model="current" :items="segmentedItems"></segmented>
+    <view class="camera">
+      <uni-icons type="camera" size="24" color="#ffcd32"></uni-icons>
     </view>
-
-    <scroll-view class="moments-list" scroll-y>
-      <swiper indicator-dots autoplay circular>
-        <swiper-item>11</swiper-item>
-        <swiper-item>22</swiper-item>
-        <swiper-item>33</swiper-item>
-      </swiper>
-      <moment
-        v-for="item in momentsList"
-        :avatar="item.avatar"
-        :name="item.name"
-        :verification="item.verification"
-        :content="item.content"
-        :images="item.images"
-        :location="item.location"
-        :likes="item.likes"
-        :comments="item.comments"
-      />
-      <view style="height: 100rpx"></view>
-    </scroll-view>
   </view>
+
+  <scroll-view
+    class="moments-list"
+    scroll-y
+    refresher-enabled
+    refresher-background="#222"
+    :refresher-triggered="refresherTriggered"
+    :refresher-threshold="100"
+    @refresherrefresh="onRefresherRefresh"
+    @refresherabort="onRefresherAbort"
+    @scrolltolower="onScrollToLower"
+  >
+    <swiper indicator-dots autoplay circular>
+      <swiper-item>11</swiper-item>
+      <swiper-item>22</swiper-item>
+      <swiper-item>33</swiper-item>
+    </swiper>
+    <moment
+      v-for="item in listData"
+      :avatar="item.avatar"
+      :name="item.name"
+      :verification="item.verification"
+      :content="item.content"
+      :images="item.images"
+      :location="item.location"
+      :likes="item.likes"
+      :comments="item.comments"
+    />
+    <uni-load-more :status="loadMoreStatus" :content-text="loadMoreContent" @clickLoadMore="onClickLoadMore" />
+    <view style="height: 100rpx"></view>
+  </scroll-view>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
 import segmented from "@/sheep/components/segmented/segmented.vue";
 import moment from "@/sheep/components/moment/moment.vue";
+import makeFriendApi from "@/sheep/api/make-friend";
+import useScroll from "@/sheep/hooks/use-scroll";
+
+const {
+  listData,
+  refresherTriggered,
+  loadMoreContent,
+  loadMoreStatus,
+  onRefresherRefresh,
+  onRefresherAbort,
+  onScrollToLower,
+  onClickLoadMore,
+} = useScroll(makeFriendApi.getMakeFriendList);
 
 const current = ref(0);
 const segmentedItems = ["动态", "附近"];
-
-interface Moment {
-  id: number;
-  username: string;
-  userAvatar: string;
-  time: string;
-  content: string;
-  images?: string[];
-  likes: number;
-  comments: number;
-}
-
-const momentsList = ref<any[]>([
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-    verification: "实人认证",
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-  {
-    id: 1,
-    username: "小雨",
-    userAvatar: "/static/avatar1.jpg",
-    time: "2小时前",
-    content: "今天天气真好，出去走走～",
-    images: ["/static/moment1.jpg"],
-    likes: 12,
-    comments: 3,
-  },
-  {
-    id: 2,
-    username: "阳光",
-    userAvatar: "/static/avatar2.jpg",
-    time: "5小时前",
-    content: "新买的咖啡机到了，试试手冲咖啡☕",
-    likes: 8,
-    comments: 1,
-  },
-]);
 </script>
 
 <style scoped lang="scss">
-.moments-page {
-  background-color: $color-background;
-  height: calc(100vh - 100rpx);
-  .header {
-    position: relative;
-    height: 100rpx;
-    .segmented {
-      position: absolute;
-      left: 30rpx;
-      top: 50rpx;
-      transform: translateY(-50%);
-    }
-    .camera {
-      position: absolute;
-      top: 50rpx;
-      transform: translateY(-50%);
-      right: 30rpx;
-    }
+.header {
+  position: relative;
+  height: 100rpx;
+  .segmented {
+    position: absolute;
+    left: 30rpx;
+    top: 50rpx;
+    transform: translateY(-50%);
   }
-  .moments-list {
-    height: calc(100vh - 100rpx - 100rpx);
+  .camera {
+    position: absolute;
+    top: 50rpx;
+    transform: translateY(-50%);
+    right: 30rpx;
   }
 }
+.moments-list {
+  height: calc(100vh - 100rpx - 100rpx);
+}
 </style>

src/pages/profile/profile.vue

@@ -23,7 +23,7 @@
         <view class="menu-item" v-for="item in menuList" :key="item.id">
           <view class="menu-icon">{{ item.icon }}</view>
           <text class="menu-text">{{ item.text }}</text>
-          <text class="menu-arrow">></text>
+          <uni-icons type="right" size="16" color="#999999"></uni-icons>
         </view>
       </view>
       <view style="height: 100rpx"></view>
@@ -55,36 +55,12 @@ const userInfo = ref<UserInfo>({
 });
 
 const menuList = ref<MenuItem[]>([
-  { id: 1, icon: "👤", text: "个人资料" },
-  { id: 2, icon: "💎", text: "会员中心" },
-  { id: 3, icon: "🎁", text: "我的礼物" },
-  { id: 4, icon: "❤️", text: "我的喜欢" },
-  { id: 5, icon: "👥", text: "我的关注" },
-  { id: 6, icon: "📸", text: "我的相册" },
-  { id: 1, icon: "👤", text: "个人资料" },
-  { id: 2, icon: "💎", text: "会员中心" },
-  { id: 3, icon: "🎁", text: "我的礼物" },
-  { id: 4, icon: "❤️", text: "我的喜欢" },
-  { id: 5, icon: "👥", text: "我的关注" },
-  { id: 6, icon: "📸", text: "我的相册" },
-  { id: 1, icon: "👤", text: "个人资料" },
-  { id: 2, icon: "💎", text: "会员中心" },
-  { id: 3, icon: "🎁", text: "我的礼物" },
-  { id: 4, icon: "❤️", text: "我的喜欢" },
-  { id: 5, icon: "👥", text: "我的关注" },
-  { id: 6, icon: "📸", text: "我的相册" },
-  { id: 1, icon: "👤", text: "个人资料" },
-  { id: 2, icon: "💎", text: "会员中心" },
-  { id: 3, icon: "🎁", text: "我的礼物" },
-  { id: 4, icon: "❤️", text: "我的喜欢" },
-  { id: 5, icon: "👥", text: "我的关注" },
-  { id: 6, icon: "📸", text: "我的相册" },
-  { id: 1, icon: "👤", text: "个人资料" },
-  { id: 2, icon: "💎", text: "会员中心" },
-  { id: 3, icon: "🎁", text: "我的礼物" },
-  { id: 4, icon: "❤️", text: "我的喜欢" },
-  { id: 5, icon: "👥", text: "我的关注" },
-  { id: 6, icon: "📸", text: "我的相册" },
+  { id: 1, icon: "1", text: "个人资料" },
+  { id: 2, icon: "2", text: "会员中心" },
+  { id: 3, icon: "3", text: "我的礼物" },
+  { id: 4, icon: "4", text: "我的喜欢" },
+  { id: 5, icon: "5", text: "我的关注" },
+  { id: 6, icon: "6", text: "我的相册" },
 ]);
 </script>
 
@@ -180,9 +156,6 @@ const menuList = ref<MenuItem[]>([
         .menu-text {
           flex: 1;
         }
-        .menu-arrow {
-          color: #999;
-        }
       }
     }
   }

src/sheep/hooks/use-scroll.ts

@@ -21,6 +21,9 @@ export default function useScroll(fetchList: (...arg: any) => Promise<any>) {
 
   const loadData = async (isRefresh: boolean = false) => {
     try {
+      if (pageInfo.current === 1) {
+        uni.showLoading({ title: "加载中..." });
+      }
       if (isRefresh) {
         pageInfo.current = 1;
         const { total, data } = await fetchList(pageInfo.current);
@@ -43,6 +46,8 @@ export default function useScroll(fetchList: (...arg: any) => Promise<any>) {
     } catch (error) {
       console.error("加载数据失败:", error);
       return false;
+    } finally {
+      uni.hideLoading();
     }
   };