添加登录功能

src/components/SButton.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 
 <template>
   <view
-    class="container"
+    class="sbtn"
     :style="{ width: width, borderRadius: rounded + 'px' }"
     @click="onClick"
   >
@@ -26,7 +26,7 @@ const props = defineProps({
 </template>
 
 <style scoped>
-.container {
+.sbtn {
   margin: 0 auto;
   height: 40px;
   line-height: 40px;
@@ -34,5 +34,8 @@ const props = defineProps({
   background-color: #fed847;
   font-size: 15px;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>

src/components/UserHeader.vue

@@ -1,25 +1,29 @@
 <script setup>
-import { ref, computed } from "vue";
+import { computed } from "vue";
 const props = defineProps({
   showRank: {
     type: Boolean,
     default: false,
   },
-});
-const userInfo = ref({
-  name: "打酱油·路过",
-  level: "L100",
-  rank: 1928,
-  rankTotal: 1320,
+  user: {
+    type: Object,
+    default: () => ({
+      nickName:'',
+      lvl:0,
+      points:0,
+      rankLvl:0,
+      lvlPoints:0,
+    }),
+  },
 });
 const containerWidth = computed(() => (props.showRank ? "72vw" : "100vw"));
 const toUserPage = () => {
   // 获取当前页面路径
   const pages = getCurrentPages();
   const currentPage = pages[pages.length - 1];
-  
+
   // 如果当前不是用户页面才进行跳转
-  if (currentPage.route !== 'pages/user') {
+  if (currentPage.route !== "pages/user") {
     uni.navigateTo({
       url: "/pages/user",
     });
@@ -35,15 +39,15 @@ const toUserPage = () => {
     </view>
     <view class="user-details">
       <view class="user-name">
-        <text>{{ userInfo.name }}</text>
+        <text>{{ user.nickName }}</text>
         <image src="../static/vip1.png" mode="widthFix" />
       </view>
       <view class="user-stats">
         <text class="level-tag">钻石1级</text>
-        <text class="level-tag">{{ userInfo.level }}</text>
+        <text class="level-tag">{{ user.lvl }}</text>
         <view class="rank-tag">
           <view :style="{ width: '40%' }" />
-          <text>158/1928</text>
+          <text>{{ user.lvl }}/{{ user.lvlPoints }}</text>
         </view>
       </view>
     </view>
@@ -52,7 +56,7 @@ const toUserPage = () => {
       <text>本赛季全国</text>
       <text class="rank-number"
         >第<text :style="{ color: '#ffd700' }"
-          >{{ userInfo.rank }}/{{ userInfo.rankTotal }}</text
+          >{{ user.points }}/{{ user.rankLvl }}</text
         >名</text
       >
     </view>