计分本添加排行榜

src/pages/my-like-list.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+import Avatar from "@/components/Avatar.vue";
+import ScrollList from "@/components/ScrollList.vue";
+import { getMyLikeList } from "@/apis";
+
+const list = ref([]);
+
+const onListLoading = async (page) => {
+  const result = await getMyLikeList(page);
+  if (page === 1) list.value = result.list;
+  else list.value = list.value.concat(result.list);
+  return result.list.length;
+};
+</script>
+
+<template>
+  <Container
+    :bgType="2"
+    bgColor="#F5F5F5"
+    :whiteBackArrow="false"
+    title="赞我的朋友"
+  >
+    <view class="container">
+      <ScrollList :onLoading="onListLoading">
+        <block v-for="item in list" :key="item.id">
+          <view class="like-item">
+            <Avatar :src="item.avatar" mode="widthFix" />
+            <text>{{ item.name }}</text>
+          </view>
+          <view class="like-bottom-line" />
+        </block>
+      </ScrollList>
+    </view>
+  </Container>
+</template>
+
+<style scoped lang="scss">
+.container {
+  width: 100%;
+  height: 100%;
+}
+.like-item {
+  background: $uni-white;
+  height: 140rpx;
+  width: 100%;
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #5c6582;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 25rpx;
+}
+.like-item > text {
+  margin-left: 25rpx;
+}
+.like-bottom-line {
+  width: calc(100% - 50rpx);
+  margin: 0 25rpx;
+  height: 1rpx;
+  background: #e5e5e5;
+}
+</style>