修改项目配置，更换图片

project.config.json

@@ -1,5 +1,5 @@
 {
-  "appid": "wx0f07fb1df8a28105",
+  "appid": "wxa8f5989dcd45cc23",
   "compileType": "miniprogram",
   "libVersion": "3.7.7",
   "packOptions": {

src/manifest.json

@@ -49,13 +49,18 @@
   },
   "quickapp": {},
   "mp-weixin": {
-    "appid": "",
+    "appid": "wxa8f5989dcd45cc23",
     "setting": {
       "urlCheck": false
     },
     "usingComponents": true,
     "darkmode": true,
-    "themeLocation": "theme.json"
+    "themeLocation": "theme.json",
+    "permission": {
+      "scope.userInfo": {
+        "desc": "用于完善用户资料"
+      }
+    }
   },
   "mp-alipay": {
     "usingComponents": true
@@ -67,4 +72,4 @@
     "usingComponents": true
   },
   "vueVersion": "3"
-}
+}

src/pages/friend-battle.vue

@@ -12,7 +12,6 @@ const warnning = ref("");
 const roomNumber = ref("");
 
 const enterRoom = () => {
-  console.log(roomNumber.value);
   if (!roomNumber.value) {
     warnning.value = "请输入房间号";
   } else {

src/pages/index.vue

@@ -5,13 +5,68 @@ import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import { getAppConfig } from '@/apis'
 
+// 添加登录状态和用户信息
+const isLogin = ref(true);
 const userInfo = ref({
-  name: "打酱油·路过",
-  level: "L100",
-  rank: 1928,
-  rankTotal: 1320,
+  name: "",
+  avatarUrl: "",
+  level: "L1",
+  rank: 0,
+  rankTotal: 0,
 });
 
+// 检查登录状态
+const checkLogin = () => {
+  const storedUserInfo = uni.getStorageSync('userInfo');
+  if (storedUserInfo) {
+    userInfo.value = JSON.parse(storedUserInfo);
+    isLogin.value = true;
+  }
+};
+
+// 处理微信登录
+const handleLogin = () => {
+  uni.getUserProfile({
+    desc: '用于完善用户资料',
+    success: (res) => {
+      const { userInfo: wxUserInfo } = res;
+      console.log('wxUserInfo', wxUserInfo);
+      // 获取登录凭证
+      uni.login({
+        provider: 'weixin',
+        success: async (loginRes) => {
+          const { code } = loginRes;
+          console.log('loginRes', loginRes);
+          // 这里可以把 code 和用户信息发送到后端
+          // const result = await loginAPI(code, wxUserInfo);
+          // 暂时直接使用微信返回的用户信息
+          userInfo.value = {
+            name: wxUserInfo.nickName,
+            avatarUrl: wxUserInfo.avatarUrl,
+            level: "L1",
+            rank: 0,
+            rankTotal: 0,
+          };
+          isLogin.value = true;
+          
+          // 保存到本地存储
+          uni.setStorageSync('userInfo', JSON.stringify(userInfo.value));
+        },
+        fail: (err) => {
+          uni.showToast({
+            title: '登录失败',
+            icon: 'none'
+          });
+          console.error('登录失败：', err);
+        }
+      });
+    },
+    fail: (err) => {
+      console.log('获取用户信息失败：', err);
+    }
+  });
+};
+
 const toFristTryPage = () => {
   uni.navigateTo({
     url: "/pages/first-try",
@@ -60,7 +115,15 @@ onMounted(() => {
 <template>
   <view class="root-container">
     <AppBackground />
-    <UserHeader showRank />
+    <!-- 根据登录状态显示用户信息或登录按钮 -->
+    <block v-if="isLogin">
+      <UserHeader :userInfo="userInfo" showRank />
+    </block>
+    <block v-else>
+      <view class="login-btn" @click="handleLogin">
+        <text>微信登录</text>
+      </view>
+    </block>
 
     <view class="container">
       <view class="feature-grid">
@@ -187,7 +250,7 @@ onMounted(() => {
 
 .bow-card > text {
   position: absolute;
-  top: 70%;
+  top: 67%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 13px;
@@ -195,11 +258,11 @@ onMounted(() => {
 }
 
 .bow-card > image:first-child {
-  transform: scaleY(1.1) translateY(9px);
+  transform: scaleY(1.08) translateY(9px);
 }
 
 .bow-card > image:last-child {
-  transform: translateY(7px);
+  transform: translateY(12px);
 }
 
 .practice-card {
@@ -230,7 +293,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   padding-bottom: 20px;
-  margin-top: 36%;
+  margin-top: 42%;
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 
@@ -339,4 +402,16 @@ onMounted(() => {
   line-height: 20px;
   margin-bottom: 5px;
 }
+.login-btn {
+  margin: 20px;
+  padding: 10px 20px;
+  background-color: #07c160;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.login-btn text {
+  color: #ffffff;
+  font-size: 16px;
+}
 </style>