添加登录功能

src/pages/index.vue

@@ -1,85 +1,22 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { onMounted } from "vue";
 import AppFooter from "@/components/AppFooter.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import { getAppConfig } from "@/apis";
-
-// import useStore from "@/store";
+import useStore from "@/store";
 
 import { storeToRefs } from "pinia";
-// const store = useStore();
-// 使用actions方法
-// const { updateUsername } = store;
+const store = useStore();
 // 使用storeToRefs，用于UI里显示，保持响应性
-// const { user } = storeToRefs(store);
+const { user } = storeToRefs(store);
 
-// 添加登录状态和用户信息
-const isLogin = ref(true);
-const userInfo = ref({
-  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 = () => {
-  // console.log("getUsername", store.getUsername);
-  // updateUsername("we0f9we9f08");
-  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 toLoginPage = () => {
+  uni.navigateTo({
+    url: "/pages/login",
   });
 };
-
 const toFristTryPage = () => {
-  console.log("username", username);
   uni.navigateTo({
     url: "/pages/first-try",
   });
@@ -128,11 +65,11 @@ onMounted(() => {
   <view class="root-container">
     <AppBackground />
     <!-- 根据登录状态显示用户信息或登录按钮 -->
-    <block v-if="isLogin">
-      <UserHeader :userInfo="userInfo" showRank />
+    <block v-if="user.id">
+      <UserHeader :user="user" showRank />
     </block>
     <block v-else>
-      <view class="login-btn" @click="handleLogin">
+      <view @click="toLoginPage">
         <text>微信登录</text>
       </view>
     </block>
@@ -418,16 +355,4 @@ 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>